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/
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
