CODEWITHSUNDEEP
javascriptphpcsstwitter-bootstrap
GrumpyCrouton
GrumpyCrouton

Reputation: 8621

Modal darkening entire screen, and nothing is clickable

I'm using Bootstraps modals, this is my layout.

The user would be anywhere on the site where there is a header, and in the header is a "settings" button, which should be clicked to reveal a modal with some options in it. These options are not relative to the question.

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.

I got it working, except one major flaw. When the modal appears, it darkens the entire screen (including over the modal) and thus makes everything unclickable.

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>

The CSS is default bootstrap.

If I happen to run the modal FROM the modals.php page (by putting a button in that file), it runs normal, but will not work with my websites design. Could anyone help me figure out why the backdrop covers the entire page (including the modal itself)?

Upvotes: 0

Views: 773

Answers (1)

GrumpyCrouton
GrumpyCrouton

Reputation: 8621

It turns out, it was because the modal code was being placed inside the header of the website, the fix was to simply move it to the footer to be loaded after everything else.

Upvotes: 2

Related Questions