Bootstrap模态z-index

Question

问题是:我正在使用parrallx滚动,所以当我尝试通过Bootstrap弹出一个box-modal时,我在页面中有z-index我让他看起来像这样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

好吧，尽管这个条目很旧。本周我正在使用引导程序的模态并遇到了这个“问题”。我的解决方案以某种方式混合了一切，只是发布它，因为它可能对某人有所帮助:)

首先检查 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方法基本上比以前的，但没有事件侦听器相同。

希望它可以帮助某人！