title: open modal in Bootstrap container on page load
body: <p>I'm using a Bootstrap modal to show a progress bar while many gallery thumbnail images preload. The modal works fine, automatically opening when the page loads and hiding when the preload is complete. However, the modal darkens the entire screen - instead I want to leave the Navbar visible and just darken everything else. I'm using shuffle.js to sort and display gallery images when clicked, and for some reason it displays the modal in the way I want, but I can't figure out why and reverse engineer a solution. Here's what I have currently:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $("#myModal").modal('show');
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="myModal" class="modal"&gt;
    &lt;span class="close" onclick="document.getElementById('myModal').style.display='none'"&gt;&amp;times;&lt;/span&gt;
    &lt;img class="modal-content" id="img01"&gt;
    &lt;div id="caption"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>