jQuery Bootstrap 模态 z-index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19917026/
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
Bootstrap modal z-index
提问by Dagan Bog-Computers
The issue is: I'm using parrallx scrolling, so I have z-index in the page now when I try to popup a box-modal by Bootstrap I get him to look like this https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png
问题是：我正在使用 parrallx 滚动，所以当我尝试通过 Bootstrap 弹出框模态时，我现在在页面中有 z-index 我让他看起来像这样https://www.dropbox.com/s /42tzvfppj4vh4vx/截图%202013-11-11%2020.38.36.png
As you can see, the box-modal isn't on top and any mouse click disables it. if I disable this css code :
如您所见，框模态不在顶部，任何鼠标单击都会禁用它。如果我禁用此 css 代码：
#content {
color: #003bb3;
position: relative;
margin: 0 auto;
width: 960px;
z-index: 300;
background: url('../images/parallax-philosophy-ltl.png') top center;
}
the box modal works. just to notice, Bootstrap default .modal is z-index:1050 , so I can't understand why it's not on top of all other context.
框模态有效。请注意，Bootstrap 默认 .modal 是 z-index:1050 ，所以我不明白为什么它不在所有其他上下文之上。
that's the box-modal:
那是框模态：
<section id="launch" class="modal hide fade">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>??? ???? ?????? </h3>
</header>
<div class="modal-body">
<form method="post" action="/update" id="myForm2">
<input type="radio" id="yes_arrive" name="arrive" checked="checked" value="yes">????<br>
<p><input type="text" required name="fsname" value="" placeholder="???? ?? ???? ?????? "></p>
<p>??? ????? ??????? </p>
<select name="number" id="number">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<hr/>
<input type="hidden" name="title" id="title" value="{{title}}">
<input type="radio" name="arrive" id ="no_arrive" value="no">?? ????
<p>???? ??? ????</p>
<input type="text" name="no_arrive_reason" placeholder="??? ???????, ?? ??? ????">
<hr/>
<p class="submit"><input type="submit" name="submit" value="???"></p>
</form>
</div>
<footer class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Close</button>
</footer>
</section>
and I trigger him from top menu:
我从顶部菜单触发他：
<li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>
thanks ahead.
提前谢谢。
EDIT
编辑
Solution found if anyone falls to the same problem.
this is the way: add data-backdrop="false" to section or div that you contain the modal with
e.g: <section id="launch" class="modal hide fade in" data-backdrop="false">notice that it doesn't get the gray background that way, so it's kinda a dirty solution, will be happy to hear of a better one.
如果有人遇到同样的问题，就会找到解决方案。这是这样的：将 data-backdrop="false" 添加到包含模态的部分或 div 中，例如：<section id="launch" class="modal hide fade in" data-backdrop="false">注意它不会以这种方式获得灰色背景，所以它有点肮脏的解决方案，很高兴听到一个更好的。
回答by Jon
The problem almost always has something to do with "nested" z-indexes. As an Example:
该问题几乎总是与“嵌套”z-index 相关。举个例子：
<div style="z-index:1">
some content A
<div style="z-index:1000000000">
some content B
</div>
</div>
<div style="z-index:10">
Some content C
</div>
if you look at the z-index only you would expect B,C,A, but because B is nested in a div that is expressly set to 1, it will show up as C,B,A.
如果仅查看 z-index，您会期望 B、C、A，但由于 B 嵌套在明确设置为 1 的 div 中，因此它将显示为 C、B、A。
Setting position:fixed locks the z-index for that element and all its children, which is why changing that can solve the problem.
设置 position:fixed 会锁定该元素及其所有子元素的 z-index，这就是更改它可以解决问题的原因。
The solution is to find the parent element that has the z-index set and either adjust the setting or move the content so the layers and their parent containers stack up the way you want. Firebug in Firefox has a tab in the far right named "Layout" and you can quickly go up the parent elements and see where the z-index is set.
解决方案是找到设置了 z-index 的父元素，然后调整设置或移动内容，使图层及其父容器按照您想要的方式堆叠。Firefox 中的 Firebug 在最右侧有一个名为“Layout”的选项卡，您可以快速上移父元素并查看 z-index 设置的位置。
回答by Sam Ruby
I found this question as I had a similar problem. While data-backdropdoes "solve" the issue; I found another problem in my markup.
我发现了这个问题，因为我有一个类似的问题。虽然data-backdrop“解决”了问题；我在我的标记中发现了另一个问题。
I had the button which launched this modal andthe modal dialog itself was in the footer. The problem is that the footer was defined as navbar_fixed_bottom, and that contained position:fixed.
我有它推出这个模式按钮和模态对话框本身是在页脚。问题是页脚被定义为navbar_fixed_bottom，并且包含position:fixed.
After I moved the dialog outside of the fixed section, everything worked as expected.
在我将对话框移到固定部分之外后，一切都按预期进行。
回答by Martin Staufcik
The modal dialog can be positioned on top by overriding its z-index property:
模态对话框可以通过覆盖其 z-index 属性来定位在顶部：
.modal.fade {
z-index: 10000000 !important;
}
回答by Arnulfo Solis Ramirez
Well, despite of this entry being very old. I was using bootstrap's modal this week and came along this "issue". My solution was somehow a mix of everything, just posting it as it may help someone :)
好吧，尽管这个条目很旧。本周我正在使用引导程序的模态并遇到了这个“问题”。我的解决方案以某种方式混合了一切，只是发布它，因为它可能对某人有所帮助:)
First check the Z-index war to get a fix there!
首先检查 Z-index War以在那里得到修复！
The firstthing you can do is deactivate the modal backdrop, I had the Stackoverflow post before but I lost it, so I wont take the credit for it, keep that in mind; but it goes like this in the HTML code:
您可以做的第一件事是停用模态背景，我之前有过 Stackoverflow 帖子，但我丢失了它，所以我不会为此归功于它，请记住这一点；但它在 HTML 代码中是这样的：
<!-- from the bootstrap's docs -->
<div class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
<!-- mind the data-backdrop="false" -->
<div class="modal-dialog" role="document">
<!-- ... modal content -->
</div>
</div>The secondapproach was to have an event listener attached to the bootstrap's shown modal event. This is somehow not so pretty as you may think but maybe with some tricks by your own may somehow work. The advantage of this is that the element attaches the event listener and you can completely forget about it as long as you have the event listener attached :)
所述第二方法是具有连接到所述自举的示出的模态事件的事件侦听器。这在某种程度上并不像您想象的那么漂亮，但也许您自己的一些技巧可能会奏效。这样做的好处是元素附加了事件侦听器，只要附加了事件侦听器，就可以完全忘记它:)
var element = $('selector-to-your-modal');
// also taken from bootstrap 3 docs
$(element).on('shown.bs.modal', function(e) {
// keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
var backDrop = $('.modal-backdrop');
$(element).append($(backDrop));
});The second.1approach is basically the same than the previous but without the event listener.
该second.1方法基本上比以前的，但没有事件侦听器相同。
Hope it helps someone!
希望它可以帮助某人！
回答by Mohammed Nafie
ok, so if you are using bootstrap-rtl.css, what you can do is go to the following class .modal-backdropand remove the z-indexattribute. after that all should be fine
好的，所以如果您使用的是 bootstrap-rtl.css，您可以做的是转到以下类.modal-backdrop并删除z-index属性。之后一切都应该没问题
回答by Miroslav Siska
I had this problem too. Problem is comming from html, created by bootstrap js:
我也有这个问题。问题来自 html，由 bootstrap js 创建：
<div class="modal-backdrop fade in"></div>
This line is created directly before end of <body>element. This cause "z-index stacked element problem." I believe that bootstrap .js do creation of this element wrong. If you have in mvc layout page, this script will cause still the same problem. Beter js idea cut be to get target modal id and inject this line to html before...
该行直接在<body>元素结束之前创建。这会导致“z-index 堆叠元素问题”。我相信 bootstrap .js 创建这个元素是错误的。如果您在 mvc 布局页面中，此脚本仍会导致相同的问题。更好的 js 想法是获取目标模式 id 并将此行注入 html 之前...
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
SO SOLUTION IS repair bootstrap.js - part of modal:
解决方案是修复 bootstrap.js - 模态的一部分：
.appendTo(this.$body)
//REPLACE TO THIS:
.insertBefore(this.$element)
回答by Marc Magon
I fell into this this with using the JQLayout plugin, especially when using nested layouts and modals with Bootstrap 4.
我在使用 JQLayout 插件时陷入了这一困境，尤其是在 Bootstrap 4 中使用嵌套布局和模式时。
An overriding css needs to be added to correct the behaviour,
需要添加一个覆盖的 css 来纠正行为，
.pane-center{
z-index:inherit !important;
}
回答by Magor Menessy
Resolved this issue for vue, by adding to the options an id: 'alertBox'so now every modal container has its parent set to something like alertBox__id0whatverwhich can easily be changed with css:
为 vue 解决了这个问题，通过添加选项，id: 'alertBox'所以现在每个模态容器都将其父级设置为类似alertBox__id0whatver可以使用 css 轻松更改的内容：
div[id*="alertBox"] { background: red; }
(meaning if id name contains ( *=) 'alertBox' it will be applied.
（意味着如果 id 名称包含 ( *=) 'alertBox' 它将被应用。
回答by kunal singh
Try this Script:
试试这个脚本：
function addclassName(){
setTimeout(function(){
var c = document.querySelectorAll(".modal-backdrop");
for (var i = 0; i < c.length; i++) {
c[i].style.zIndex = 1040 + i * 20 ;
}
var d = document.querySelectorAll(".modal.fade");
for(var i = 0; i<d.length; i++){
d[i].style.zIndex = 1050 + i * 20;
}
}, 10);
}
}
