This code works for every “.modal” created on the page (even dynamic modals) and backdrop
instantly overlays the previous modal.
The below multiple modals overlay example uses a
setTimeout because the “.modal-backdrop” is not created when the
event “show.bs.modal” is triggered.
The Example for multiple modals overlay and it looks
like -
//Multiple modals overlay
$(function () {
$('#openBtn').click(function () {
$('#myModal').modal({
show: true
})
});
//The below code works for every
.modal created on the page (even dynamic modals) and backdrop instantly
overlays the previous modal.
$(document).on('show.bs.modal', '.modal', function (event) {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});
And HTML
<h2>Multiple modals
overlay </h2>
<a data-toggle="modal" href="#myModal" class="btn
btn-primary">Launch modal 1</a>
<div class="modal
fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal dialog title</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<p>Your content for
the dialog / modal goes here. </p>
<a data-toggle="modal" href="#myModal2" class="btn
btn-primary">Launch modal 2</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn
btn-primary">Save</a>
</div>
</div>
</div>
</div>
<div class="modal
fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal dialog title</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<p>Your content for the dialog / modal
goes here. </p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn
btn-primary">Save</a>
</div>
</div>
</div>
</div>
Result link - http://jsfiddle.net/5mkyrjoc/