ynd*_*lok 10 html css positioning twitter-bootstrap
当我的Bootstrap模态显示时,它看起来像是在黑色背景后面.单击屏幕上的任意位置会导致模态消失.
这个问题似乎是由我的导航栏定位造成的 - 删除position: absolute;或position: relative;修复它.不幸的是,由于我需要在导航栏上使用z-index,我无法摆脱定位.
为什么导航栏的位置导致模态被遮挡？有没有办法让模态出现在背景前面,同时保持导航栏上的定位？
Pri*_*cey 13
这是因为你的模态在你的内部#nav_inner <div>所以它将继承你不想要它的一些样式.
它不需要在那里.
尝试将其移入身体,如下所示:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="gutter" id="left_gutter"></div>
<div class="gutter" id="right_gutter"></div>
<div id="container">
<div class="navbar">
<div id="nav_inner">
<div class="page" id="nav_page">
<div class="content_wrapper">
<div class="content">
<a href="#add_topic_modal" role="button" data-toggle="modal" id="teach">Teach</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_inner">
</div>
</div>
<div class="modal hide fade" id="add_topic_modal" tabindex="-1" role="dialog" aria-labelledby="add_lesson_label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="add_lesson_label">Teach</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</body>
</html>
更新: 这是其中一个问题我知道改变DOM中的元素位置会修复它,但理解原因完全是另一个问题.
position: relative; z-index: 2;从两者中删除#navbar并#nav_inner修复问题,因此即使模态具有position: fixed; z-index: 1050;z-index仅适用于位置和固定位置的位置使元素相对于浏览器窗口定位,由于父元素具有相对位置和z指数......魔术.
上面出现褪色背景的原因是因为这是使用javascript添加到身体,所以它应用正确的1040的z-index没有问题,并被放置在模态上方.
我遇到了同样的问题.但是当我的内容被ajax加载时,我无法在关闭之前创建"模态"
所以我这样做了:
$(function(){
$("#add_topic_modal").appendTo("body");
});
现在"模态"按预期工作.