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.
Replies (17)
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
<!--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 
Hi ,
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!
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 ,
Sure, we will include this fix it the next update. Appreciate your contribution.
Regards.
Your Support Matters!
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 ,
Sure, we will try to fix it in the next update. All the best with your project!
Regards.
