Can bootstrap modal dialog overlay another dialog?

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');
}

I think the modal backdrop (overlay) is shared by all modals in the BODY.

But, you can use the 'show' event from the second modal to change the opacity on the first modal -- giving the effect of the overlay over the first modal:

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
});

Demo: http://bootply.com/61322

EDIT:

If you want to disable modal 1 while modal 2 is open, you can unbind modal 1 when modal 2 opens, and then restore modal 1 when modal 1 closes. I updated the Bootply for this.

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
    $('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
    $('#myModal').css('opacity', 1);
    $('#myModal').removeData("modal").modal({});
});