jQuery 引导模式对话框可以覆盖另一个对话框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16547650/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can bootstrap modal dialog overlay another dialog?
提问by feri baco
<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>
Everything works fine; the only problem is that first dialog is displayed over the overlay of the second dialog. How can I fix this?
一切正常；唯一的问题是第一个对话框显示在第二个对话框的覆盖层上。我怎样才能解决这个问题？
This is how it looks now:
这是它现在的样子：
And I want it to look like this:
我希望它看起来像这样：
采纳答案by feri baco
I have found out that I can change z-index of the second "shadow" using this css rule:
我发现我可以使用此 css 规则更改第二个“阴影”的 z-index：
.modal-backdrop.fade.in:nth-child(2){
z-index: 1060 !important;
}
than I just need to set z-index of the second dialog to for example 1070 and that's it, although I am not sure about compatibility with older browsers.
比我只需要将第二个对话框的 z-index 设置为例如 1070 就可以了，尽管我不确定与旧浏览器的兼容性。
回答by robert
I wrote a blog post about how to solve this stacking problem programatically: http://gurde.com/stacked-bootstrap-modals/
我写了一篇关于如何以编程方式解决这个堆叠问题的博客文章：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');
}
回答by Zim
I think the modal backdrop (overlay) is shared by all modals in the BODY.
我认为模态背景（覆盖）由 BODY 中的所有模态共享。
But, you can use the 'show' event from the second modal to change the opacity on the first modal -- giving the effect of the overlay over the first modal:
但是，您可以使用第二个模态中的 'show' 事件来更改第一个模态的不透明度——在第一个模态上产生叠加效果：
$('#myModal2').on('show', function() {
$('#myModal').css('opacity', .5);
});
Demo: http://bootply.com/61322
EDIT:
编辑：
If you want to disable modal 1 while modal 2 is open, you can unbind modal 1 when modal 2 opens, and then restore modal 1 when modal 1 closes. I updated the Bootplyfor this.
如果要在模态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({});
});
回答by major-mann
You could add an attribute to "secondModal"
您可以向“secondModal”添加属性
style="z-index:100000;"
回答by mr_crazy_pants
Just in case someone stumbles across this.
以防万一有人偶然发现这个。
Add this value to your main script tag on the your page
var current_zindex = 1049; var current_zindex_bg = 1048;in your document ready function add
$('.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 });Now in the minifieldbootstrap file itself find this bit of code:
'<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+';" />'
将此值添加到页面上的主脚本标记
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 });现在在minifieldbootstrap 文件中找到这段代码：
'<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+';" />'
That's it. You can find the same bit of code in the unminified boostrap.js by searching for "modal-backdrop" and follow the same process.
就是这样。您可以通过搜索“modal-backdrop”在未缩小的 boostrap.js 中找到相同的代码并遵循相同的过程。
Clicking the top most backdrop will hide the top most modal as you would want.
单击最顶部的背景将根据需要隐藏最顶部的模式。
回答by MilancheMax
Let's say you have modal var modal = $('.some-selector').modal('show');first you want to change it's zIndex like: modal.css({zIndex: 7760})
假设你var modal = $('.some-selector').modal('show');首先有模态，你想改变它的 zIndex 像：modal.css({zIndex: 7760})
you can find reference to its $backdrop in modal.data(), so you can access it and change anything: modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});
您可以在中找到对其 $backdrop 的引用modal.data()，因此您可以访问它并更改任何内容：modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});
回答by Praveen Reddy
You can simply do this way: (note : You need bootstrap 3 for this)
您可以简单地这样做：（注意：为此您需要引导程序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>
回答by Alex Grande
To make overlays open other overlays, I added a simple line of JS in the event listener.
为了让叠加层打开其他叠加层，我在事件监听器中添加了一行简单的 JS。
Thus any link inside an overlay will first close the overlay it is in.
因此，覆盖层内的任何链接将首先关闭它所在的覆盖层。
Search for in the Bootstrap overlay code:
在 Bootstrap 覆盖代码中搜索：
$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {
Add to that function:
添加到该功能：
$this.closest(".modal").modal('hide');
