Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update
Light
Dark
System
Ask  Question

Metronic 8 Modal inside Modal


Hello,
I have a problem creating a modal inside another modal. I tried different ways.
For example:
https://thewebdev.info/2022/05/08/how-to-open-another-modal-in-modal-with-bootstrap/

- Every time I try to open the second modal, the first one closes. (The problem will be Metronic. It works on pure bootstrap 5.)

Thanks


G
Guest 2 years ago
Bootstrap
18 Answers
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 (18)

user
Vicky Sakthi 6 months ago

sfd


user
Việt Anh 1 year ago

How can I apply in Vue theme? In the Vue docs, it's showing code that belong to pure html project?


G
Guest 2 years ago

Is that update pushed into GitHub? I am trying to find the initCard() but it is not in the app.js


user
Sean Author2 years ago

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.


G
Guest 2 years ago

Hi, you have some update?


G
Guest 2 years ago

Here is code:
https://paste.ofcode.org/ywpTzZYhyKPDhMTX4gW8b4

I tried to use various additional css with z-index, but nothing helped

Thanks


user
Sean Author2 years ago

Seems the above link is now working. Can you please double check it ?


G
Guest 2 years ago

Are you sure? by opening the second modal, the first modal closes for me.


user
Sean Author2 years ago

Hi,

We are able to reproduce it with the latest Bootstrap 5.2 version as well.
Soon we will be releasing a new Metronic update with the latest Bootstrap 5.2 and we can try to add a stacked modal solution in the documentation. Is it ok for you to use the new Metronic update when it's arrives ? Or you need the fix for your current Bootstrap 5.1 version ?

It seems Bootstrap 5.1.x as Bootstrap 5.2.x requires a special workaround to handle the stacked modals.

Regards.


G
Guest 2 years ago

hi, i need a fix for the current version.
THANKS


G
Guest 2 years ago

It is important for me, now.


user
Sean Author2 years ago

Noted, we are checking it now and we will update you once we have a resolution for the issue.


G
Guest 2 years ago

ok thanks


user
riterix 2 years ago

That would be great to have Stacked modal feature,

Thank you Sean.


G
Guest 2 years ago

Hi, you have some update?


user
Sean Author2 years ago

We haven't fixed it yet as the issue seems in the Bootstrap core JS. We will dig it further.


G
Guest 2 years ago


<a href="%22%20data-bs-toggle=%22modal%22%20data-bs-target=%22#kt_modal_1" target="_blank" rel="noopener noreferrer">Emit1</a>
<div class="modal fade" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true">
 <div class="modal-dialog modal-dialog-centered mw-900px">
 <div class="modal-content">
 <div class="modal-header px-6 py-3">
 <h5 class="modal-title">Title</h5>
 <!--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">
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor"></rect>
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor"></rect>
</svg>
 </span>
 </div>
 <!--end::Close-->
 </div>

 <div class="modal-body">
 <a href="%22%20data-bs-toggle=%22modal%22%20data-bs-target=%22#kt_modal_2" target="_blank" rel="noopener noreferrer">Emit2</a>
 </div>

 </div>
 </div>
</div>
<div class="modal fade" tabindex="-1" aria-hidden="true">
 <!--begin::Modal dialog-->
 <div class="modal-dialog modal-dialog-centered mw-650px">
 <!--begin::Modal content-->
 <div class="modal-content">
 <!--begin::Modal header-->
 <div class="modal-header pb-0 border-0 justify-content-end">
 <!--begin::Close-->
 <div class="btn btn-sm btn-icon btn-active-color-primary" data-bs-dismiss="modal">
 <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
 <span class="svg-icon svg-icon-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
</svg>
</span>
 <!--end::Svg Icon-->
 </div>
 <!--end::Close-->
 </div>
 <!--begin::Modal header-->
 <!--begin::Modal body-->
 <div class="modal-body scroll-y mx-5 mx-xl-18 pt-0 pb-15">
 <!--begin::Content-->
 <div class="text-center mb-13">
 <h1 class="mb-3">Lorem ipsum</h1>
 </div>
 <!--end::Content-->
 <!--begin::Search-->
 <div data-kt-search-keypress="true" data-kt-search-min-length="2" data-kt-search-enter="enter" data-kt-search-layout="inline">
 <!--begin::Form-->
 <form data-kt-search-element="form" class="w-100 position-relative mb-5" autocomplete="off">
 <!--begin::Hidden input(Added to disable form autocomplete)-->
 <input type="hidden" />
 <!--end::Hidden input-->
 <!--begin::Icon-->
 <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
 <span class="svg-icon svg-icon-2 svg-icon-lg-1 svg-icon-gray-500 position-absolute top-50 ms-5 translate-middle-y">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2" rx="1" transform="rotate(45 17.0365 15.1223)" fill="currentColor" />
<path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z" fill="currentColor" />
</svg>
</span>
 <!--end::Svg Icon-->
 <!--end::Icon-->
 <!--begin::Input-->
 <input type="text" class="form-control form-control-lg form-control-solid px-15" name="search" value="" placeholder="Vyh&Auml;&frac34;ad&aacute;va&Aring;&yen;..." data-kt-search-element="input" />
 <!--end::Input-->
 <!--begin::Spinner-->
 <span class="position-absolute top-50 end-0 translate-middle-y lh-0 d-none me-5" data-kt-search-element="spinner">
<span class="spinner-border h-15px w-15px align-middle text-muted"></span>
</span>
 <!--end::Spinner-->
 <!--begin::Reset-->
 <span class="btn btn-flush btn-active-color-primary position-absolute top-50 end-0 translate-middle-y lh-0 me-5 d-none" data-kt-search-element="clear">
<!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
<span class="svg-icon svg-icon-2 svg-icon-lg-1 me-0">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="currentColor" />
<rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="currentColor" />
</svg>
</span>
 <!--end::Svg Icon-->
</span>
 <!--end::Reset-->
 </form>
 <!--end::Form-->

 </div>
 <!--end::Search-->
 </div>
 <!--end::Modal body-->
 </div>
 <!--end::Modal content-->
 </div>
 <!--end::Modal dialog-->
</div>


user
Sean Author2 years ago

Hi,

Are you putting 2 modals side by side? The CSS solution you are using to change the second modal's z-index requires that these modals are put next to each other.

Could you please provide your code here and we will try to debug it for you?

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