12

当我的 Bootstrap 模态显示时，它看起来像是在黑色背景后面。单击屏幕上的任意位置会导致模式消失。

该问题似乎是由定位我的导航栏引起的 - 删除position: absolute;或position: relative;修复它。不幸的是，由于我需要在导航栏上使用 z-index，所以我无法摆脱定位。

为什么导航栏的定位会导致模态框变黑？有没有办法让模式出现在背景前面，同时保持导航栏上的定位？

4

2 回答 2

14

这是因为您的模态在您的内部#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 中的元素位置可以解决它，但了解原因完全是另一个问题。

position: relative; z-index: 2;从两者#navbar中删除#nav_inner也解决了问题，因此即使模式具有position: fixed; z-index: 1050;z-index 仅适用于位置并且固定位置将元素放置在相对于浏览器窗口的位置，这仍然无法正常工作，因为父元素具有相对位置和 z-index... 魔术。

上面出现褪色背景的原因是因为这是使用 javascript 添加到 body 中的，因此应用正确的 z-index 1040 没有问题，并放置在 modal 上方。

于 2013-01-03T21:46:51.237 回答
7

我遇到了同样的问题。但是由于我的内容是由 ajax 加载的，所以在关闭之前我无法创建“模态”

所以我这样做了：

$(function(){
  $("#add_topic_modal").appendTo("body");
});

现在“模态”按预期工作。

于 2014-03-16T21:31:16.177 回答