title: Twitter Bootstrap Modal data-dismiss
body: <p>I am trying to get modal data-dismiss action working to close the modal on click.  There seems to be an issue that I cannot find documented and hopefully someone here can shed some light on it.  Here is the code </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='UTF-8'/&gt;
      &lt;title&gt; Modal test &lt;/title&gt;
      &lt;link href='themes/default/bootstrap/css/bootstrap.css' rel='stylesheet'/&gt;
      &lt;link href='themes/default/bootstrap/css/bootstrap-responsive.css'     rel="stylesheet"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="modal" id="myModal"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button class="close" data-dismiss="modal"&gt;×&lt;/button&gt;
      &lt;h3&gt;Modal header&lt;/h3&gt;   
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;p&gt;One fine body…&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
      &lt;a href="#" class="btn btn-primary"&gt;Save changes&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="alert alert-block"&gt;
    &lt;a class="close" data-dismiss="alert" href="#"&gt;x&lt;/a&gt;
    &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
      Best check yo self, you're not...
  &lt;/div&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="themes/default/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p> is the full suite of bootstrap including bootstrap-modal.js</p>
  
  <p>I put in the <code>&lt;div class="alert alert-block"&gt;</code> for testing the action, it seems to work in the alert but not the modal!</p>