基于这个答案的例子，我更新了它，以支持引导3和4，并修复了评论中提到的所有问题。因为我也注意到它们，因为我有一些模态有一个超时和自动关闭。
它将不能与bootstrap 5一起工作。引导5不存储b。Modal对象不再使用node.data('bs.modal')。
我建议全屏查看代码片段。
使用与前面提到的答案相同的例子引导3，只是对话4被修改了。
!function () {
var z = "bs.modal.z-index.base",
re_sort = function (el) {
Array.prototype.slice.call($('.modal.show,.modal.in').not(el))
.sort(function (a, b) { // sort by z-index lowest to highest
return +a.style.zIndex - +b.style.zIndex
})
.forEach(function (el, idx) { // re-set the z-index based on the idx
el.style.zIndex = $(el).data(z) + (2 * idx);
const b = $(el).data('bs.modal')._backdrop || $(el).data("bs.modal").$backdrop;
if (b) {
$(b).css("z-index", +el.style.zIndex - 1);
}
});
};
$(document).on('show.bs.modal', '.modal', function (e) {
// removing the currently set zIndex if any
this.style.zIndex = '';
/*
* should be 1050 always, if getComputedStyle is not supported use 1032 as variable...
*
* see https://getbootstrap.com/docs/4.0/layout/overview/#z-index and adjust the
* other values to higher ones, if required
*
* Bootstrap 3: https:////netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css
.modal {
[...]
z-index: 1050;
[...]
}
.modal-backdrop {
[...]
z-index: 1040;
[...]
}
* Bootstrap 4: https://getbootstrap.com/docs/4.0/layout/overview/#z-index
*
*
* lowest value which doesn't interfer with other bootstrap elements
* since we manipulate the z-index of the backdrops too we need two for each modal
* using 1032 you could open up to 13 modals without overlapping popovers
*/
if (!$(this).data(z)) {
let def = +getComputedStyle(this).zIndex; // 1050 by default
def = 1032;
$(this).data(z, def);
}
// resort all others, except this
re_sort(this);
// 2 is fine 1 layer for the modal, 1 layer for the backdrop
var zIndex = $(this).data(z) + (2 * $('.modal.show,.modal.in').not(this).length);
e.target.style.zIndex = zIndex;
/*
* Bootstrap itself stores the var using jQuery data property the backdrop
* is present there, even if it may not be attached to the DOM
*
* If it is not present, wait for it, using requestAnimationFrame loop
*/
const waitForBackdrop = function () {
try { // can fail to get the config if the modal is opened for the first time
const config = $(this).data('bs.modal')._config || $(this).data('bs.modal').options;
if (config.backdrop != false) {
const node = $(this).data('bs.modal')._backdrop ||
$(this).data("bs.modal").$backdrop;
if (node) {
$(node).css('z-index', +this.style.zIndex - 1);
} else {
window.requestAnimationFrame(waitForBackdrop);
}
}
} catch (e) {
window.requestAnimationFrame(waitForBackdrop);
}
}.bind(this);
waitForBackdrop();
});
$(document).on("shown.bs.modal", ".modal", function () {
re_sort();
});
$(document).on('hidden.bs.modal', '.modal', function (event) {
this.style.zIndex = ''; // when hidden, remove the z-index
if (this.isConnected) {
const b = $(this).data('bs.modal')._backdrop || $(this).data("bs.modal").$backdrop;
if (b) {
$(b).css("z-index", '');
}
}
re_sort();
// if still backdrops are present at dom - readd modal-open
if ($('.modal-backdrop.show,.modal-backdrop.in').length)
$(document.body).addClass("modal-open");
})
}();
/* crazy batman newspaper spinny thing */
.rotate {
transform:rotate(180deg);
transition:all 0.25s;
}
.rotate.in {
transform:rotate(1800deg);
transition:all 0.75s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Stacked Bootstrap Modal Example.</h2>
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</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 1</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<p>more content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal fade rotate" 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 2</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<p>come content</p>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal3" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal3">
<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 3</h4>
</div>
<div class="container"></div>
<div class="modal-body">Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br> <a data-toggle="modal" href="#myModal4" class="btn btn-primary">Launch modal</a>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal4">
<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 4</h4>
</div>
<div class="container"></div>
<div class="modal-body">
<button onclick="$('#myModal').modal('hide');" class="btn btn-primary">hide #1</button>
<button onclick="$('#myModal').modal('show');" class="btn btn-primary">show #1</button>
<br>
<button onclick="$('#myModal2').modal('hide');" class="btn btn-primary">hide #2</button>
<button onclick="$('#myModal2').modal('show');" class="btn btn-primary">show #2</button>
<br>
<button onclick="$('#myModal3').modal('hide');" class="btn btn-primary">hide #3</button>
<button onclick="$('#myModal3').modal('show');" class="btn btn-primary">show #3</button>
</div>
<div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
</div>
</div>
Bootstrap 4 (see Bootstrap 3 snippet for commented code)
!function () {
var z = "bs.modal.z-index.base",
re_sort = function (el) {
Array.prototype.slice.call($('.modal.show,.modal.in').not(el))
.sort(function (a, b) {
return +a.style.zIndex - +b.style.zIndex
})
.forEach(function (el, idx) {
el.style.zIndex = $(el).data(z) + (2 * idx);
const b = $(el).data('bs.modal')._backdrop || $(el).data("bs.modal").$backdrop;
if (b) {
$(b).css("z-index", +el.style.zIndex - 1);
}
});
};
$(document).on('show.bs.modal', '.modal', function (e) {
this.style.zIndex = '';
if (!$(this).data(z)) {
let def = +getComputedStyle(this).zIndex;
def = 1032;
$(this).data(z, def);
}
re_sort(this);
var zIndex = $(this).data(z) + (2 * $('.modal.show,.modal.in').not(this).length);
e.target.style.zIndex = zIndex;
const waitForBackdrop = function () {
try {
const config = $(this).data('bs.modal')._config || $(this).data('bs.modal').options;
if (config.backdrop != false) {
const node = $(this).data('bs.modal')._backdrop ||
$(this).data("bs.modal").$backdrop;
if (node) {
$(node).css('z-index', +this.style.zIndex - 1);
} else {
window.requestAnimationFrame(waitForBackdrop);
}
}
} catch (e) {
window.requestAnimationFrame(waitForBackdrop);
}
}.bind(this);
waitForBackdrop();
});
$(document).on("shown.bs.modal", ".modal", function () {
re_sort();
});
$(document).on('hidden.bs.modal', '.modal', function (event) {
this.style.zIndex = '';
if (this.isConnected) {
const b = $(this).data('bs.modal')._backdrop || $(this).data("bs.modal").$backdrop;
if (b) {
$(b).css("z-index", '');
}
}
re_sort();
if ($('.modal-backdrop.show,.modal-backdrop.in').length)
$(document.body).addClass("modal-open");
})
}();
// creates dynamic modals i used this for stuff like
// `enterSomething('stuff','to','display').then(...)`
!function() {
let a = (i, a) => Array.prototype.forEach.call(a, (e) => $('#' + i + '-modal').find('.modal-body').append(e)),
b = function () { $(this).remove() },
c = (i, a) => Array.prototype.forEach.call(a, (e) => $('#' + i + '-modal-text-container').append(e)),
r = () => 'dialog-' + (Date.now() + '-' + Math.random()).replace('.', '-');
this.createModal = function createModal() {
let id = r();
$(document.body).append('<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="static" aria-hidden="true" id="' + id + '-modal"><div class="modal-dialog d-flex modal-xl"><div class="modal-content align-self-stretch" style="overflow: hidden; max-height: -webkit-fill-available;"><div class="modal-header py-1"><h5 class="modal-header-text p-0 m-0"></h5><button id="' + id + '-modal-btn-close" type="button" tabindex="-1" class="close" data-dismiss="modal" aria-label="Close" title="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body py-2"></div><div class="modal-footer py-1"><button type="button" class="btn btn-primary btn-sm" id="' + id + '-modal-btn-ok">Okay</button></div></div></div></div>');
$('#' + id + '-modal-btn-ok').on('click', () => $('#' + id + '-modal').modal('hide'));
$('#' + id + '-modal').on('shown.bs.modal', () => $('#' + id + '-modal-btn-ok').focus()).on('hidden.bs.modal', b).modal('show');
$('#' + id + '-modal').find(".modal-header-text").html("Title");
a(id, arguments);
return new Promise((r) => $('#' + id + '-modal').on('hide.bs.modal', () => r()));
}
}();
function another() {
createModal(
$("<button class='btn mx-1'>Another...</button>").on("click", another),
$("<button class='btn mx-1'>Close lowest</button>").on("click", closeLowest),
$("<button class='btn mx-1'>Bring lowest to front</button>").on("click", lowestToFront),
$("<p>").text($(".modal.show,.modal.in").length)
).then(() => console.log("modal closed"));
// only for this example:
$(".modal").last().css('padding-top', ($(".modal.show,.modal.in").length * 20) +'px');
}
function closeLowest() {
$(Array.prototype.slice.call($('.modal.show,.modal.in'))
.sort(function (a, b) { // sort by z-index lowest to highest
return +a.style.zIndex - +b.style.zIndex
})).first().modal('hide');
}
function lowestToFront() {
$(Array.prototype.slice.call($('.modal.show,.modal.in'))
.sort(function (a, b) { // sort by z-index lowest to highest
return +a.style.zIndex - +b.style.zIndex
})).first().trigger('show.bs.modal');
}
another();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<p>Use inspecter to check z-index values</p>
<button class="btn btn-outline-primary" onclick="another()">Click!</button>
