<button class="btn" onClick="$('#firstModal').modal('show');">First</button>
<!-- Modal -->
<div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
<button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
</div>
</div>
<!-- Modal -->
<div id="secondModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
Some error message goes here.
</div>
</div>
一切正常;唯一的问题是第一个对话框显示在第二个对话框的叠加层上。我该如何解决这个问题?
答案 0 :(得分:7)
我写了一篇关于如何以编程方式解决此堆叠问题的博文:http://gurde.com/stacked-bootstrap-modals/
$(document)
.on('show.bs.modal', '.modal', function(event) {
$(this).appendTo($('body'));
})
.on('shown.bs.modal', '.modal.in', function(event) {
setModalsAndBackdropsOrder();
})
.on('hidden.bs.modal', '.modal', function(event) {
setModalsAndBackdropsOrder();
});
function setModalsAndBackdropsOrder() {
var modalZIndex = 1040;
$('.modal.in').each(function(index) {
var $modal = $(this);
modalZIndex++;
$modal.css('zIndex', modalZIndex);
$modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
$('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}
答案 1 :(得分:2)
我认为模态背景(叠加)由BODY中的所有模态共享。
但是,你可以使用第二个模态中的'show'事件来改变第一个模态的不透明度 - 在第一个模态上给出叠加效果:
$('#myModal2').on('show', function() {
$('#myModal').css('opacity', .5);
});
修改:
如果要在模态2打开时禁用模态1,则可以在模态2打开时取消绑定模态1,然后在模态1关闭时恢复模态1。 我为此更新了Bootply 。
$('#myModal2').on('show', function() {
$('#myModal').css('opacity', .5);
$('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
$('#myModal').css('opacity', 1);
$('#myModal').removeData("modal").modal({});
});
答案 2 :(得分:1)
您可以将属性添加到“secondModal”
style="z-index:100000;"
答案 3 :(得分:1)
我发现我可以使用此css规则更改第二个“影子”的z-index:
.modal-backdrop.fade.in:nth-child(2){
z-index: 1060 !important;
}
比我只需要将第二个对话框的z-index设置为例如1070,就是这样,虽然我不确定与旧浏览器的兼容性。
答案 4 :(得分:1)
万一有人偶然发现了这一点。
将此值添加到您网页上的主脚本标记
var current_zindex = 1049;
var current_zindex_bg = 1048;
在您的文档就绪功能添加
$('.modal').on('show', function () {
current_zindex++;//increment z-index for your modals
current_zindex_bg++;//increment z-index for your modal-backdrops
$(this).css('z-index',current_zindex); //setting the modal backdrop
});
现在在 minifield 引导程序文件中找到这段代码:
'<div class="modal-backdrop '+r+'" />' //just search for "modal-backdrop" without the quotes
change to:
'<div class="modal-backdrop '+r+'" style="z-index:'+current_zindex_bg+';" />'
就是这样。您可以通过搜索“模态背景”在未确定的boostrap.js中找到相同的代码,并按照相同的过程进行操作。
单击最顶部的背景将隐藏最需要的模态。
答案 5 :(得分:0)
为了使叠加层打开其他叠加层,我在事件监听器中添加了一行简单的JS。
因此,叠加层内的任何链接都将首先关闭它所在的叠加层。
在Bootstrap叠加代码中搜索:
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
添加到该功能:
$this.closest(".modal").modal('hide');
答案 6 :(得分:0)
假设你有模态var modal = $('.some-selector').modal('show');
首先你要改变它的zIndex,如:modal.css({zIndex: 7760})
您可以在modal.data()
找到对其$背景的引用,以便您可以访问它并更改任何内容:modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});
答案 7 :(得分:0)
你可以这样做:(注意:你需要bootstrap 3)
<button class="btn" data-target="#firstModal" data-toggle="modal">First</button>
<div id="firstModal" data-target="#secondModal" data-dismiss="modal"
data-toggle="modal">
<div class="modal-body">
<button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
</div>
</div>
<div id="secondModal" >
<div class="modal-body">
Some error message goes here.
</div>
</div>
答案 8 :(得分:0)
以下是对我有用的解决方案:
$("#ModalId").appendTo("body");
获取详细答案。检查此博客文章
https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background