How to open more than one modal at the same time?

I have a Wizzard modal open, and I want to open a new modal on top.
But when I try to open a new one, the wizard modal closes.

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (9)

I found this online, but it blocks the modal.. =(

https://www.codeply.com/p/yNgonlFihM

Hi,

This is in our todo list and we are trying to find a workaround as Bootstrap Modal originally does not support this feature. Once we find a solution we will provide you the workaround code.

Regards.

Hi,

We have been working on this and finally came up with a workaround:

1) Add initModal global wrapper in src/js/components/app.js right after initCard() function:

var initModal = function() {
var elements = Array.prototype.slice.call(document.querySelectorAll("[data-bs-stacked-modal]"));

if (elements && elements.length > 0) {
elements.forEach((element) => {
if (element.getAttribute("data-kt-initialized") === "1") {
return;
}

element.setAttribute("data-kt-initialized", "1");

element.addEventListener("click", function(e) {
e.preventDefault();

const modalEl = document.querySelector(this.getAttribute("data-bs-stacked-modal"));

if (modalEl) {
const modal = new bootstrap.Modal(modalEl);
modal.show();
}
});
});
}
}

2) Add the initModal() into the global init clause:

return {
init: function () {
initLozad();

initSmoothScroll();

initCard();

initModal();

....
}
}

3) Use the below HTML markup to have nested modals:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_stacked_1">
Launch demo modal
</button>

<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Modal title</h3>

<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">...</span>
</div>
<!--end::Close-->
</div>

<div class="modal-body">
...

<button type="button" class="btn btn-primary" data-bs-stacked-modal="#kt_modal_stacked_2">
Launch stacked modal
</button>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Stacked modal title</h3>

<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">...</span>
</div>
<!--end::Close-->
</div>

<div class="modal-body">
...

<button type="button" class="btn btn-primary" data-bs-stacked-modal="#kt_modal_stacked_3">
Launch stacked modal
</button>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

<div class="modal fade" tabindex="-1" data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Stacked modal title</h3>

<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x">...</span>
</div>
<!--end::Close-->
</div>

<div class="modal-body">
...
</div>

<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

4) Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment you will only need the compile assets, no need to install the build tools dependencies there.

Hope this will be helpful.

Regards.

That's the best news for 2023 so far.

I've been struggling with that for days, in 2021, and even more I drop the fact that I could use 2 nested modals .....so Drop the thing,

But now you come up with brilliant fix.

Are you integrating it in the next Release ?

Thank you Sean for everything happy

Hi happy,

You are most welcome! Sure, it will be in the next update along with Bootstrap 5.3 latest.

Regards.

Hi Sean,

Thank you!!
After recompile I can now see the initModal() on the scripts.bundle.js file! happy
But when I tried using the HTML markup you shared, I got the error below:

Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
at ne._initializeBackDrop (plugins.bundle.js:12897:32054)
at new ne (plugins.bundle.js:12897:30931)
at ne.getOrCreateInstance (plugins.bundle.js:12897:8552)
at HTMLButtonElement. (plugins.bundle.js:12897:35111)
at HTMLDocument.s (plugins.bundle.js:12897:4490)

May I know your Metronic version? Can you try to use the latest v8.1.6?

Yes, v8.1.6

Hi,

Have you run the gulp task to compile the JS changes? It works as expected on our end. Could you please share a test link so we can debug your code online ?

Regards

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(