模态变暗整个屏幕,没有任何内容可点击


Modal darkening entire screen, and nothing is clickable

我正在使用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.

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

顶栏.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 是默认引导程序。

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

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