Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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 (17)


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

<!--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

<!--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

<!--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.<anonymous> (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



Hi!!

I was able to make it work after 8.1.7 update, but when opening the second modal, the black overlay duplicates but stays below the first modal..

Is there a way the overlay of the stacked modal stays between the first modal and the second? "shadowing" the first one?



Hi,

We will fix this in the next update. In the meantime, you can fix it by changing the stacked modal construction with backdrop: false in src/js/components/app.js:


if (modalEl) {
const modal = new bootstrap.Modal(modalEl, {backdrop: false});
modal.show();
}


Then recompile your assets folder with Gulp or Webpack.

Please note that the build tools are only required in the development environment 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.

Regards.



Great!! Thank you, I will wait for the next update.. =)



Hi happy,

Sure, we will include this fix it the next update. Appreciate your contribution.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi Sean,

Another thing, I'm trying to trigger the Confirm Close of the stacked modal, but when asking the stacked modal to close after confirmation the modal does not close.

And if I force the close changing the modal var, the modal does closes, but the black overlays stays.

modalEventoStacked.hide(); // Hide modal
to
$('#modal_novo_evento2').hide();

$('#modal_novo_evento2_close, #modal_novo_evento2_cancel').click( function(e){
e.preventDefault();

Swal.fire({
text: "Tem certeza que quer cancelar?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Sim, cancelar!",
cancelButtonText: "Não, retornar",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
formEventoStacked.reset(); // Reset form
debugger;
modalEventoStacked.hide(); // Hide modal
debugger;
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Seu formulário não foi cancelado!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
})
}



Hi,

Can you try to use a non-jQuery way of hiding the modal as shown in the docs?

Do you have a test URL to check your working example? If yes, can u pls share it via a private reply?

Regards.



I put this thread on hold. I will wait for the next update to add this feature to my form.

Thank you so much for all the support



Hi happy,

Sure, we will try to fix it in the next update. All the best with your project!

Regards.



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.



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

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


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  :(