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

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

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.

Deleted comment

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

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

Thanks

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

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

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.

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

It is important for me, now.

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

ok thanks

That would be great to have Stacked modal feature,

Thank you Sean.

Hi, you have some update?

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

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