Twitter bootstrap - open modal over an already opened modal

Question

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!

Answer 1

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!

Answer 2

All you need to do is place the markup for the confirmation modal lower down in the code than the details modal.

Answer 3

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/

Answer 4

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.