How to create a modal in a modal?
If I click on a button, I want to show the button as we can see in the documentation at: https://preview.keenthemes.com/metronic8/vue/docs/#/modal.
Now I want to open a new modal, in the current modal. I want to close the current modal (temporary) and open the new modal. When I click on the button in the new modal, I want to close the new modal, and reopen the temporary closed modal.
How to manage this?
Replies (5)
Hi,
You can handle this using javascript.
- Get the modal instance.
- Use show() and hide() functions to close and open your modals
var myModalEl = document.getElementById("myModal")
var modal = bootstrap.Modal.getInstance(myModalEl)modal.show()
modal.hide()Please check bootstrap 5 official doc for more info:
https://getbootstrap.com/docs/5.0/components/modal/
I understand this. But what about if a modal gets NULL response with bootstrap.Modal.getInstance(myModalEl)? When is a modal associated with it? Is this only when you tab a button?
You can try to use getOrCreateInstance function in this case.
var myModalEl = document.querySelector("#myModal")
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl)I do understand that. But the question is. When is a modal being associated? When does is need to be created? And when not?
Hi,
If you are using attributes then you don't need to create an instance since it will already be initialized as an instance of the bootstrap modal.
