Question

We have a page where a client wants the modal to be visible on page view. I’ve run into the problem where the bootstrap modal doesnt close unless you launch it manually

Am I doing something wrong? If you click launch modal (even tho the modal is already visible) you can then close it

Here’s the HTML:

<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>

<div class="modal" id="myModal">
  <div class="modal-header">
    <button class="close" data-dismiss="modal" data-target="#myModal">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal" data-target="#myModal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

The CSS is just the Bootstap stuff. We’re not using any JavaScript code for this at all.

Live copy on jsFiddle

Answer 1

You’re not “launching” the modal, you just have inline markup that’s visible. The modal hasn’t really been opened at all.

Make the modal hidden (add style="display: none" to the #myModal div) and then trigger opening it using .modal('show') from ready:

jQuery(function($) {
    $('#myModal').modal('show');​​
});

Updated fiddle

That will hook up the required handlers for the close button, position it properly, do the background overlay, etc.