Question

问题是：我正在使用parrallx滚动，所以我在页面中有z-index 现在，当我尝试通过Bootstrap弹出一个box-modal时，我让他看起来像这样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”添加到包含模式的section或div 例如：<section id="launch" class="modal hide fade in" data-backdrop="false"> 注意它没有那种灰色背景，所以它有点肮脏的解决方案，很高兴听到更好的解决方案。

Answer 1

问题几乎总是与“嵌套”z索引有关。作为一个例子：

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

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

解决方案是找到具有z-index集的父元素，并调整设置或移动内容，以便图层及其父容器按您希望的方式堆叠。 Firefox中的Firebug在最右边有一个名为“Layout”的选项卡，您可以快速查找父元素并查看z-index的设置位置。

Answer 2

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

我有按钮启动了这个模态和模态对话框本身在页脚中。问题是页脚定义为navbar_fixed_bottom，包含position:fixed。

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

Answer 3

通过覆盖其z-index属性，可以将模态对话框置于顶部：

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

Answer 4

嗯，尽管此条目很老。我本周使用bootstrap的模态并出现了这个“问题”。我的解决方案在某种程度上是所有内容的混合，只是发布它，因为它可能会帮助某人：）

首先检查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>

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

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 方法与之前的方法基本相同，但没有事件监听器。

希望它有所帮助！

Answer 5

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

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

此行直接在<body>元素结束之前创建。这导致＆＃34; z-index堆叠元素问题。＆＃34;我相信bootstrap .js会错误地创建这个元素。如果你有mvc布局页面，这个脚本会导致同样的问题。 Beter js想法切割得到目标模态id并在此之前将此行注入html ...

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

SO SOLUTION IS修复bootstrap.js - 模态的一部分：

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

Answer 6

好的，所以如果你使用的是bootstrap-rtl.css，您可以做的是转到以下课程 .modal-backdrop 并删除 z-index 属性。之后一切都应该没问题

Answer 7

试试这个脚本：

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

}

Answer 8

我使用JQLayout插件进入了这个，特别是在使用Bootstrap 4的嵌套布局和模态时。

需要添加重写css来纠正行为，

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

Answer 9

通过在选项中添加id: 'alertBox'解决了这个问题，现在，每个模式容器的父类都设置为alertBox__id0whatver，可以通过CSS轻松更改：

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

（这意味着ID名称包含（*=）“ alertBox”将被应用。

Bootstrap模态z-index

修改

9 个答案: