Bootstrap 模态 z-index答案

【问题标题】：Bootstrap modal z-indexBootstrap 模态 z-index
【发布时间】：2013-11-23 21:14:00
【问题描述】：

问题是：我正在使用 parrallx 滚动，所以我在页面中有 z-index 现在，当我尝试通过 Bootstrap 弹出框模式时，我让他看起来像这样 https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

如您所见，box-modal 不在顶部，任何鼠标单击都会禁用它。如果我禁用此 CSS 代码：

#content {
    color: #003bb3;
    position: relative;
    margin: 0 auto;
    width: 960px;
    z-index: 300;
    background: url('../images/parallax-philosophy-ltl.png') top center;
}

框模式有效。请注意，Bootstrap 默认 .modal 是 z-index:1050 ，所以我不明白为什么它不在所有其他上下文之上。

这就是盒子模式：

   <section id="launch" class="modal hide fade">
    <header class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</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>

我从顶部菜单触发他：

  <li><a class="launch" data-toggle="modal" href="#launch">Approve</a></li>

谢谢。

编辑

如果有人遇到同样的问题，就会找到解决方案。这是方法：将 data-backdrop="false" 添加到包含模态的部分或 div 例如：<section id="launch" class="modal hide fade in" data-backdrop="false"> 请注意，它不会以那种方式获得灰色背景，所以这是一个肮脏的解决方案，很高兴听到更好的解决方案。

【问题讨论】：

很难从这么少的信息中得出结论。请显示更多代码或演示。
听起来你只需要覆盖模式和背景的 Bootstrap CSS z-index 值
试图这样做，但没有成功，只有 data-backdrop="false" 成功了
查看相关Bootstrap modal appearing under background

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这个问题几乎总是与“嵌套”z-indexes 有关。举个例子：

<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>

如果您只查看 z-index，您会期望 B、C、A，但由于 B 嵌套在明确设置为 1 的 div 中，它将显示为 C、B、A。

设置 position:fixed 会锁定该元素及其所有子元素的 z-index，这就是为什么更改它可以解决问题的原因。

解决方案是找到设置了 z-index 的父元素，然后调整设置或移动内容，以便图层及其父容器按照您想要的方式堆叠。 Firefox 中的 Firebug 在最右侧有一个名为“布局”的选项卡，您可以快速向上查看父元素并查看 z-index 的设置位置。

【讨论】：

bootstrap 3 模态显示为 z-index 1040，将我的元素设置为 1041 和 1042 仍然没有按预期显示。模态中的所有元素否则将 z-index 设置为auto。没有其他 z-indexes 是模态的祖先。 position:fixed 确实有效果，但随后我在模态中的字段布局变得疯狂。有什么想法吗？
@kross - 我仍然会使用 firebug 中的 Layout 选项卡查看 firefox 中的元素，然后查看每个父级并查看是否设置了 z-index。如果 z-index 没有按预期工作，它将与父元素有关，而不是您期望的元素。
我的问题是input 元素不是positioned，所以没有应用z-index。 modal-body 是 position: relative（重置我的 z-index 基础）所以我不应该担心像 1040 这样的高 z-index 数字。我通过以下方式解决了这个问题：a）在输入中添加 position:relative，给出输入一个z-index:1 并给我的底层一个z-index:0。在非模态页面上，我的底层是z-index:-1，但在模态情况下，它实际上将它放在模态下。我认为这是一个浏览器错误，但很容易解决。

【解决方案2】：

我发现了这个问题，因为我遇到了类似的问题。虽然data-backdrop 确实“解决”了这个问题；我在标记中发现了另一个问题。

我有启动此模式的按钮并且模式对话框本身位于页脚中。问题是页脚被定义为navbar_fixed_bottom，并且包含position:fixed。

将对话框移到固定部分之外后，一切都按预期进行。

【讨论】：

确认工作，只需将 modal-div 移动到 </body> 之前或类似的位置。

【解决方案3】：

模式对话框可以通过覆盖它的 z-index 属性来定位在顶部：

.modal.fade {
  z-index: 10000000 !important;
}

【讨论】：

是否可以将其设置为属性？（没有 java 脚本）
这适用于具有 jQuery Impromptu 实现的屏幕，其中新的 Bootstrap 模式导致提示出现在提示上方。现在提示可以出现在上面了。

【解决方案4】：

好吧，尽管这个条目已经很老了。本周我正在使用引导程序的模式并出现了这个“问题”。我的解决方案以某种方式混合了所有内容，只是发布它可能会对某人有所帮助:)

首先检查 Z-index 战争以获得修复！

您可以做的第一件事是停用模态背景，我之前发布过 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>

第二种方法是将事件侦听器附加到引导程序的显示模式事件。这在某种程度上并不像你想象的那么漂亮，但也许你自己的一些技巧可能会起作用。这样做的好处是元素附加了事件侦听器，只要您附加了事件侦听器，您就可以完全忘记它:)

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));
});

second.1方法与之前的方法基本相同，但没有事件监听器。

希望它对某人有所帮助！

【讨论】：

后来我通过将动画从淡入淡出替换为 animate.css 一个“动画淡入”来修复了背景颜色和模式内容动画的问题

【解决方案5】：

我也有这个问题。问题来自 html，由 bootstrap js 创建：

<div class="modal-backdrop fade in"></div>

此行直接在<body> 元素的结尾之前创建。这会导致“z-index 堆叠元素问题”。我相信 bootstrap .js 创建这个元素是错误的。如果你在 mvc 布局页面中，这个脚本仍然会导致同样的问题。更好的 js 想法是获取目标模式 id 并将此行注入到 html 之前...

this.$backdrop = $(document.createElement('div'))
    .addClass('modal-backdrop ' + animate)
    .appendTo(this.$body)

解决方案是修复 bootstrap.js - 模态的一部分：

.appendTo(this.$body)  
//REPLACE TO THIS:
 .insertBefore(this.$element)

【讨论】：

虽然我没有使用这个解决方案，但了解到 Bootstrap 在结束 body 标记之前插入模态的背景确实帮助我解决了为什么背景没有均匀地应用于元素。对我来说，解决方案是将模态的 z-index 设置得足够高，以使其出现在所有其他元素之上，并将背景的 z-index 设置为比该值小一。

【解决方案6】：

好的，所以如果您使用的是 bootstrap-rtl.css，你可以做的是去下面的类 .modal-backdrop 并删除 z-index 属性。之后一切都会好起来的

【讨论】：

【解决方案7】：

我在使用 JQLayout 插件时遇到了这个问题，尤其是在 Bootstrap 4 中使用嵌套布局和模式时。

需要添加一个覆盖的 css 来纠正这种行为，

.pane-center{
    z-index:inherit !important;
}

【讨论】：

【解决方案8】：

试试这个脚本：

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);

}

【讨论】：

【解决方案9】：

通过在选项中添加id: 'alertBox' 解决了vue 的这个问题，因此现在每个模态容器的父级都设置为alertBox__id0whatver 之类的东西，可以使用css 轻松更改：

div[id*="alertBox"] { background: red; }

（意思是如果 id 名称包含 (*=) 'alertBox' 它将被应用。

【讨论】：