Question

我使用Bootstraps模式，这是我的布局。

用户可以在网站上有标题的任何地方，标题中有＆＃34;设置＆＃34;按钮，应该单击以显示其中包含一些选项的模态。这些选项与问题无关。

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'); ?>

modals.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页面上运行modal（通过在该文件中放置一个按钮），它运行正常，但不适用于我的网站设计。任何人都可以帮我弄清楚为什么背景覆盖整个页面（包括模态本身）？

Answer 1

事实证明，这是因为模态代码被放置在网站的标题内，修复只是将其移动到页脚以便在其他所有内容之后加载。

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

1 个答案: