Bootstrap模态框的z-index

14 浏览
0 Comments

Bootstrap模态框的z-index

问题是：我正在使用滚动视差，所以页面中有z-index

现在当我尝试通过Bootstrap弹出一个模态框时，它看起来像这样https://www.dropbox.com/s/42tzvfppj4vh4vx/Screenshot%202013-11-11%2020.38.36.png

如您所见，模态框不在最上层，任何鼠标点击都会禁用它。

如果我禁用这段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，所以我不明白为什么它不在所有其他内容的最上层。

这是模态框的代码：

我从顶部菜单触发它：

  
  • Approve
    •

    提前感谢。

    编辑

    如果有人遇到同样的问题，找到了解决办法。

    方法如下：在包含模态框的section或div中添加data-backdrop="false"

    例如：

    0

    3 答案

    0 Comments

    问题出现的原因是在一个页面中使用了jQuery Impromptu和Bootstrap modal，而Bootstrap modal的z-index属性较低，导致弹出框无法覆盖住Impromptu的提示框。

    解决方法是通过覆盖Bootstrap modal的z-index属性来调整弹出框的显示顺序。可以将以下代码添加到样式表中：

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

    这样就可以将Bootstrap modal的z-index属性设置为一个较高的值，确保弹出框能够覆盖住其他元素。这个解决方法不需要使用JavaScript，只需将代码添加到样式表中即可。

    通过设置z-index属性，可以解决Bootstrap modal在页面中与其他元素的重叠问题，确保弹出框能够正确显示在最上层。

    0
    0 Comments

    问题出现的原因是，当modal对话框所在的部分有固定定位时，会导致z-index失效。

    解决方法是将modal对话框移到固定部分的外部。可以将modal对话框放在</body>标签之前或其他位置。

    在测试过程中，有人不小心将modal放在了完整的<html></html>标签之外，但仍然能正常工作。

    0
    0 Comments

    Bootstrap模态框的z-index问题通常与“嵌套”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>

    根据z-index的值，我们期望的显示顺序应该是B，C，A。但是由于B是嵌套在z-index设为1的div内部，实际显示顺序是C，B，A。

    解决这个问题的方法是找到设置了z-index的父元素，要么调整其设置，要么移动内容，使层和其父容器按照期望的顺序堆叠起来。在Firefox的Firebug中，通过“Layout”选项卡可以快速查看父元素，找到设置了z-index的位置。

    对于Bootstrap 3模态框，其z-index为1040，即使将元素设置为1041或1042，仍然无法按照期望的顺序显示。模态框内部的所有元素的z-index都设置为auto，没有其他祖先元素设置了z-index。虽然将position:fixed设置为元素确实会产生效果，但模态框中的布局可能会出现问题。

    作者建议通过在Firefox的Firebug中使用Layout选项卡查看元素，并逐个查看每个父元素是否设置了z-index。如果z-index的行为不符合预期，可能是与父元素有关，而不是所期望的元素。

    作者遇到的问题是元素没有设置position，因此z-index没有应用。而modal-body设置了position: relative，重置了作者的z-index基础，因此不需要担心像1040这样高的z-index值。作者通过给input添加position:relative，给input设置z-index:1，并给遮罩层设置z-index:0来解决了这个问题。在非模态页面中，作者的遮罩层的z-index是-1，但在模态情况下，它被放置在模态框下方。作者认为这是一个浏览器的bug，但可以很容易地通过这种方法解决。

    0