我需要覆盖显示以上的第一个模式，而不是在后面。
$('#openBtn').click(function(){
$('#myModal').modal({show:true})
});
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" 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 title</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="#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" id="myModal2" data-backdrop="static">
<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">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
我试图改变。modal- background的z索引，但它变得一团糟。
在某些情况下，我在同一页上有两个以上的情态动词。
在modal.js中添加全局变量
var modalBGIndex = 1040; // modal backdrop background
var modalConIndex = 1042; // modal container data
//添加变量modal .prototype. background
var e = $.Event('show.bs.modal', { relatedTarget: _relatedTarget })
modalConIndex = modalConIndex + 2; // add this line inside "Modal.prototype.show"
that.$element
.show()
.scrollTop(0)
that.$element.css('z-index',modalConIndex) // add this line after show modal
if (this.isShown && this.options.backdrop) {
var doAnimate = $.support.transition && animate
modalBGIndex = modalBGIndex + 2; // add this line increase modal background index 2+
this.$backdrop.addClass('in')
this.$backdrop.css('z-index',modalBGIndex) // add this line after backdrop addclass
Bootstrap 5的解决方案(纯JS)。
@A1rPun的答案启发的解决方案。
// On modal open
document.addEventListener('show.bs.modal', function(e) {
// Get count of opened modals
let modalsCount = 1;
document.querySelectorAll('.modal').forEach(function(modalElement) {
if (modalElement.style.display == 'block') {
modalsCount++;
}
});
// Set modal and backdrop z-indexes
const zIndex = 1055 + 10 * modalsCount;
e.target.style.zIndex = zIndex;
setTimeout(() => {
const backdropNotStacked = document.querySelector('.modal-backdrop:not(.modal-stack)');
backdropNotStacked.style.zIndex = ('z-index', zIndex - 5);
backdropNotStacked.classList.add('modal-stack');
});
});
解释
循环所有可见的情态动词(你不能使用pseudoselector:visible，这只在jquery中)
计算新的z指数。Bootstrap 5的默认值是1055，因此:
默认值(1055)+ 10 *打开的模态数
将这个新的计算z-index设置为模态
标识背景(没有指定类的背景——在本例中是.modal-stack)
设置这个新的计算z-index -5为背景
添加类.modal-stack到背景，以防止在打开下一个模式时得到这个背景
终于解决了。我对它进行了多种测试，效果很好。
以下是所有遇到同样问题的人的解决方案:
修改Modal.prototype.show函数(在bootstrap.js或modal.js中)
来自:
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$element
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
TO:
if (transition) {
that.$element[0].offsetWidth // force reflow
}
that.$backdrop
.css("z-index", (1030 + (10 * $(".modal.fade.in").length)))
that.$element
.css("z-index", (1040 + (10 * $(".modal.fade.in").length)))
.addClass('in')
.attr('aria-hidden', false)
that.enforceFocus()
这是我发现的最好的方法:检查打开了多少个模态，并将模态和背景的z-index更改为更高的值。
