问题是:我正在使用 parrallx 滚动,所以我在页面中有 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 ,所以我不明白为什么它不在所有其他上下文之上。
这就是框模态:
<section id="launch" class="modal hide fade">
<header class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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">
请注意,它不会以这种方式获得灰色背景,所以这是一个有点脏的解决方案,很高兴听到更好的解决方案。
最佳答案
问题几乎总是与“嵌套”的 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。
设置 position:fixed 会锁定该元素及其所有子元素的 z-index,这就是更改它可以解决问题的原因。
解决方案是找到设置了 z-index 的父元素,然后调整设置或移动内容,以便图层及其父容器按照您想要的方式堆叠。 Firefox 中的 Firebug 在最右侧有一个名为“布局”的选项卡,您可以快速进入父元素并查看 z-index 的设置位置。
关于javascript - Bootstrap 模态 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19917026/