Bootstrap Modal stops dropdown from working if click outside modal

I have a bootstrap based site where both the modal and the dropdown menus are done with bootstrap:

http://newsite.mckeehomesnc.com/

If you click on "Questions?" button it brings up a modal. If you close the modal using the x in the right corner no issue.

If you close the modal by clicking outside the modal area, it closes but then the drop down menus on the underlying page no longer work.

Any ideas? I think it has to do with an overly broad stopping of propagation in Bootstrap itself but not sure.

Answer

December 15, 2014

KyleMit

Everything starts working again if you click off of the Modal. But if you use the button it's not working. When the modal opens it adds a .modal-backdrop to the page to catch clicks away from the modal.

Div

Here's my theory on why the click isn't working. Here's the source code for the page.

<!-- Modal HTML -->
<div id="contactModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Content will be loaded here from "poupp-contact.php" file -->
        </div>
    </div>
</div>

Since the modal content is loaded dynamically, the automatic handlers that bootstrap provides that wire up events when the page loads, don't catch the data attributes that arrive after the fact.

The following code should automatically close the modal and all the attached components:

<button type="button" class="close" data-dismiss="modal">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
</button>

When bootstrap.js loads, it looks for [data-dismiss=modal] elements and wires up listeners accordingly. Since the element won't be there on startup, we'll have to add a listener that won't go anywhere and then find the element through delegation.

Listen for clicks anywhere on the body and then only care about those that have data-dismiss attributes. Then find the closest .modal parent of element that fired the event and then close that:

$(document).on('click', "[data-dismiss=modal]", function() {
    $(this).closest('.modal').modal('hide')
});

Here's a working example. I've broken the close button data attribute in order to test if we can appropriately handle it by ourselves. Bootstrap won't pick it up, but the code will.

$(document).on('click', "[data-dismissTEST=modal]", function() {
    $(this).closest('.modal').modal('hide')
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismissTEST="modal">
          <span aria-hidden="true">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>