title: Bootstrap momentarily displays hidden modal dialog on slow page loads
body: <p>I'm using Bootstrap 2.3.2 via the <code>bootstrap-sass-2.3.2.2</code> gem in a Rails app.</p>
  
  <p>With the following HTML:</p>
  
  <pre><code>  &lt;div class="modal hide fade fullscreen" id="myModal" aria-hidden="true"&gt;
      &lt;div class="modal-header"&gt;
        &lt;h3&gt;&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;img src=""&gt;
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;a class="figureFullsizeLink btn" href=""&gt;Full-size&lt;/a&gt;
        &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And links like these:</p>
  
  <pre><code>  &lt;a href="#myModal" class="btn" data-toggle="modal" data-html="true"&gt;
    &lt;img alt="Fig 1" class="figure" src="http://s3.amazonaws.com/..." title="..." /&gt;
    &lt;/a&gt;
  </code></pre>
  
  <p>And the following javascript:</p>
  
  <pre><code>$(document).ready(function() {
      ...
      // hide the modal window onload
      $("#myModal").css("display", "none");
      ...
  });
  </code></pre>
  
  <p>I get a momentary flash of the open modal dialog while the page is loading. (see <a href="https://www.youtube.com/watch?v=X-HwRpKAUh8" rel="nofollow">https://www.youtube.com/watch?v=X-HwRpKAUh8</a> for an exampe).</p>