html – 引导模式由于定位导航栏而变黑

当我的Bootstrap模态显示时,它看起来像是在黑色背景之后.点击屏幕上的任何位置会导致模态消失.

这个问题似乎是由我的导航栏定位引起的 – 删除位置：绝对;或位置：亲戚;修复它不幸的是,由于我需要在导航栏上使用z-index,所以我无法摆脱这个定位.

为什么导航栏的定位导致模态被遮挡？有没有办法使模态出现在背景的前面,同时保持在导航栏上的定位？

解决方法

这是因为你的模式在你的#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">&times;</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中的元素位置将会解决它的问题之一,但是了解原因是另一个问题.

取消位置：相对; z-index：2;从#navbar和#nav_inner也解决了这个问题,所以即使模态有位置：fixed; z-index：1050;其中z-index仅适用于某个位置,而固定位置将元素放置在相对于浏览器窗口的位置,由于父元素具有相对位置和z-index …魔术,因此仍然无法正常工作.

上面出现褪色背景的原因是因为这是使用javascript添加到身体,所以使用正确的z-index 1040没有任何麻烦,并被置于模态之上.

html – 引导模式由于定位导航栏而变黑

解决方法

相关文章