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')
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
_initializeBackDrop, TypeError: Cannot read properties of undefined (reading 'backdrop')
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:
Then you can try a demo code below.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
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
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.
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
