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 1a>
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 titleh4>
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 2a>
div>
div class="modal-footer"> a href="#" data-dismiss="modal" class="btn">Closea>
a href="#" class="btn btn-primary">Savea>
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 titleh4>
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