我正在使用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'); ?>


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

如果我恰巧从modals.php页面运行模式(通过在该文件中放置一个按钮),它将正常运行,但不适用于我的网站设计。
谁能帮我找出背景为什么覆盖整个页面(包括模式本身)的原因吗?

最佳答案

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

关于javascript - 模态使整个屏幕变暗,无可点击,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34815303/

10-08 22:51
查看更多