Metronic8, modal in modal (Stackable model)

Hello,

I purchased Metronic8 and used it well. Thank you.
And, I have a question.

I wnat modal in modal (Stackable model / 2 step)

For example,

<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#kt_modal_1">Step1</button> <-- When I click this, 1st modal popup.

<!-- 1st modal //-->
<div class="modal fade" id="kt_modal_1" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
1st modal content~~
<span class="badge badge-light-warning">Step2</span> <-- When I click this, I want the second Stackable model.
1st modal content~~
</div>

<!-- 2st modal //-->
<div class="modal fade" id="kt_modal_2" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
2st modal content~~
</div>


Is this possible?
Do you have any good ideas?

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

Hi,

This is a good request - Stackable Bootstrap Modals. We will implement this and put in the docs in a future update.

In the meantime you can refer to this solution that should work well for Bootstrap 5.

Regards.

Hi Sean,

Thank you for the example below,

We really love to see Metronic supports this option (stackable Modals)

Thank You.

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