javascript - 模态变暗整个屏幕，没有什么是可点击的

Question

我正在使用 Bootstraps 模态，这是我的布局。

用户会在网站上任何有标题的地方，标题中有一个“设置”按钮，应该单击该按钮以显示带有一些选项的模态。这些选项与问题无关。

The button to activate the modal is in a header file called topbar.php.
The modal is coded in a modals file called modals.php
modals.php is include()'d (via php) in the topbar.php file.

除了一个主要缺陷外，我让它工作了。当模态出现时，它会使整个屏幕(包括模态上方)变暗，从而使所有内容都无法点击。

topbar.php:

<ul class="nav navbar-right top-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <? echo $_SESSION['Name']; ?> <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li>
                <a data-toggle="modal" data-target="#selfUpdate" href="#" id="settingsModal"><i class="fa fa-fw fa-gear"></i> Settings</a>
            </li>
            <li class="divider"></li>
            <li>
                <a href="logout.php"><i class="fa fa-fw fa-power-off"></i> Log Out</a>
            </li>
        </ul>
    </li>
</ul>

<? include('./dynamic/modals.php'); ?>

模态.php:

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/anotherJQ.js"></script>
<script src="../js/bootstrap.min.js"></script>

    <!-- Modal -->
    <div class="modal fade" id="selfUpdate" tabindex="-1" role="dialog" aria-labelledby="selfUpdateLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="selfUpdateLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

CSS 是默认 Bootstrap 。

如果我碰巧从 modals.php 页面运行模式(通过在该文件中放置一个按钮)，它运行正常，但不适用于我的网站设计。谁能帮我弄清楚为什么背景会覆盖整个页面(包括模式本身)？

Answer 1

事实证明，这是因为模态代码被放置在网站的页眉中，解决方法是简单地将其移动到页脚以便在其他所有内容之后加载。