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!
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!
All you need to do is place the markup for the confirmation modal lower down in the code than the details modal.
Simply hide #modal and show #modal2 when click on #deleteButton
$("#deleteButton").click(function() {
$('#myModal').modal('hide')
$('#myModal2').modal('show')
});
Here's a working example: http://jsfiddle.net/baptme/nuUzN/14/
How about adding a z-index to the second modal? Like:
<div class="modal fade" style="z-index:1050">modal content here...</div>
If the value 1050 doesn't work try a higher number aka 99999.