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

I'm new to vue development, however I have a problem when trying to open the modal from a function because it's a modal inside another modal, i tired to search on docs

_initializeBackDrop, TypeError: Cannot read properties of undefined (reading 'backdrop')
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-backdrop="true"
@click="select"
>

i need open with event click on function select ** y try const myModal: any = document.getElementById('#kt_modal_evaluate_drivers') -> thanks you
Hi,

Sorry for the late reply.

As I understood you are trying to open one modal inside another, you can achieve this without using any javascript.

Just override backdrop styles with the CSS below in your component:
.modal:nth-of-type(even) {
z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
z-index: 1061 !important;
}



Then you can try a demo code below.
<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" >
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer">
<a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark">Close</a>
</div>
</div>
</div>
</div>
<div class="modal" data-bs-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">2nd Modal title</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
<a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>



Regards,
Lauris Stepanovs,
Keenthemes Support Team
I am trying with the code but it does not work, it shows the error backdrop
Thank you very much, I found a way to show the 2 modals without problems, now I need to open the modal with a function when I click a button wait for an api request, after the response show the modal, thanks for the help
Hi Juan,

I guess these errors could be related to your app logic. Glad to hear that it is working for you. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team

Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
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  :(

React Dev Vacancy

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