Can bootstrap modal dialog overlay another dialog?

Question

<button class="btn" onClick="$('#firstModal').modal('show');">First</button>

<!-- Modal -->
<div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
    </div>
</div>

<!-- Modal -->
<div id="secondModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        Some error message goes here.
    </div>
</div> 

Everything works fine; the only problem is that first dialog is displayed over the overlay of the second dialog. How can I fix this?

This is how it looks now:

And I want it to look like this:

Answer 1

I wrote a blog post about how to solve this stacking problem programatically: http://gurde.com/stacked-bootstrap-modals/

$(document)  
  .on('show.bs.modal', '.modal', function(event) {
    $(this).appendTo($('body'));
  })
  .on('shown.bs.modal', '.modal.in', function(event) {
    setModalsAndBackdropsOrder();
  })
  .on('hidden.bs.modal', '.modal', function(event) {
    setModalsAndBackdropsOrder();
  });

function setModalsAndBackdropsOrder() {  
  var modalZIndex = 1040;
  $('.modal.in').each(function(index) {
    var $modal = $(this);
    modalZIndex++;
    $modal.css('zIndex', modalZIndex);
    $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
  $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}