Here's my scenario: I'm opening a modal window with some record details, and I've a "Delete" button. When user clicks on this button, I need to show a "confirmation" modal above/over the existing modal (asking "are you sure?"), but when this confirmation modal is showed, it doesn't block the "details" first modal (behind).
Does anyone know how can I do it?
Thanks!
Bootstrap 4 - update 2019To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show. bs. modal .
In this case, id="myModal" . You could create as many modals as you want by using this structure and making sure each button's data-target references a unique id of a modal. Show activity on this post. data-toggle="modal" : identifies the DOM object having class "modal" and toggles it on the button.
Data can be passed to the modal body from the HTML document which gets displayed when the modal pops up. To pass data into the modal body jquery methods are used. jQuery is similar to JavaScript, however jQuery methods are simple and easier to implement. jQuery reduces the lines of code.
To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.
All you need to do is place the markup for the confirmation modal lower down in the code than the details modal.
It's quite easy to do it. Links in your already opened modal have to look like this:
<a href="NEW URL" data-dismiss="modal" data-toggle="modal" data-target="#newModal">Anchor text</a>
data-dismiss="modal" -> will close that modal = that is the trick!!!!
data-toggle="modal" -> will open new dialog
Enjoy!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With