32

问题是：我正在使用 parrallx 滚动，所以我现在在页面中有 z-index，当我尝试通过 Bootstrap 弹出框模式时，我让他看起来像这样https://www.dropbox.com/s /42tzvfppj4vh4vx/截图%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"> 注意它不会以这种方式获得灰色背景，所以这有点肮脏的解决方案，会很高兴听到一个更好的。

4

9 回答 9

41

这个问题几乎总是与“嵌套”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 的设置位置。

于 2014-06-13T18:25:57.687 回答
16

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

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

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

于 2013-12-26T15:33:57.127 回答
13

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

.modal.fade {
  z-index: 10000000 !important;
}
于 2016-12-20T21:51:11.747 回答
5

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

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

希望它可以帮助某人！

于 2017-04-11T08:34:34.840 回答
3

我也有这个问题。问题来自 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)
于 2016-01-11T18:44:43.377 回答
1

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

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

.pane-center{
    z-index:inherit !important;
}
于 2018-02-06T06:44:05.733 回答
1

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

于 2017-05-19T18:19:16.180 回答
0

试试这个脚本：

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

}

于 2017-08-29T10:12:13.353 回答
0

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

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

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

于 2019-12-18T11:13:03.707 回答