Bootstrap modal not working - unable to close a modal or view it correctly [#2678006]

When trying to use the Bootsrap modal in a block it fails to display correctly. It kinda displays the modal but it is still in a "fade in" mode and then you are unable to close the modal - the only way to exit is by refreshing the browser.

I used this sample code from the getbootstrap.com site right in a block. It seems like navbar might be causing this to happen

<!-- 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">
  <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="myModalLabel">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>

Comments

Comment #1

29 February 2016 at 15:38

wavesailor created an issue. See original summary.

Comment #2

blamege1 commented 9 March 2016 at 14:23

I was having the same issue. Not sure if this helps, but I created a block view for the modal. Then I created a new region below the footer called Portfolio Modal and placed the block in that that region. So the Modal doesn't actually sit inside any of the other sections such as Content for example. It sits in it's own region. Like this

<section id="contact" class="agency-contact container-fluid">
  <div class="container">
    <?php if (!empty($page['contact'])): ?>
      <?php print render($page['contact']); ?>
    <?php endif; ?>
  </div>
</section>
<footer class="footer container">
  <div class="row">
    <div class="col-md-4">
      <?php print render($page['footerl']); ?>
    </div>
    <div class="col-md-4">
      <?php print render($page['footerc']); ?>
    </div>
    <div class="col-md-4">
      <?php print render($page['footerr']); ?>
    </div>
  </div>
</footer>

<?php print render($page['portfolioModal']); ?>

Comment #3

wavesailor commented 10 March 2016 at 10:14

Title:

Bootstrap modal not working - uable to close a modal or view it correctly

» Bootstrap modal not working - unable to close a modal or view it correctly

Comment #4

wavesailor commented 11 March 2016 at 16:41

@blamege1 that worked - thanks

Some more detailed help for others:

Create a new region in file bootstrap_agency.info like this: regions[portfolioModal] = 'Portfolio modal'

Add the region to the bottom of page.tpl.php file as mentioned in #2
<?php print render($page['portfolioModal']); ?>

You then add your button or <a> trigger code to the block where you want to display it i.e.

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

Finally you add a new block (or block view) to the portfolioModal region which will contain your "modal code" i.e.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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="myModalLabel">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>