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 11 months ago
Bootstrap
16 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 (16)

S
Sean Author11 months 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.
G
Guest 11 months ago
<a href="" data-bs-toggle="modal" data-bs-target="#kt_modal_1">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="" data-bs-toggle="modal" data-bs-target="#kt_modal_2">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ľadávať..." 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>

G
Guest 11 months ago
Here is code:
https://paste.ofcode.org/ywpTzZYhyKPDhMTX4gW8b4

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

Thanks
S
Sean Author11 months ago
Seems the above link is now working. Can you please double check it ?
G
Guest 11 months ago
Are you sure? by opening the second modal, the first modal closes for me.
S
Sean Author11 months 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 11 months ago
hi, i need a fix for the current version.
THANKS
G
Guest 11 months ago
It is important for me, now.
S
Sean Author11 months ago
Noted, we are checking it now and we will update you once we have a resolution for the issue.
G
Guest 11 months ago
ok thanks
user
riterix 11 months ago
That would be great to have Stacked modal feature,

Thank you Sean.
G
Guest 11 months ago
Hi, you have some update?
S
Sean Author11 months ago
We haven"t fixed it yet as the issue seems in the Bootstrap core JS. We will dig it further.
G
Guest 5 months ago
Hi, you have some update?
S
Sean Author4 months 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</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.
G
Guest 4 months ago
Is that update pushed into GitHub? I am trying to find the initCard() but it is not in the app.js
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  :(

Metronic

Go to MetronicDownloadsPurchase MetronicRefunds

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle