title: How does a Bootstrap modal change the page's opacity?
body: <p>When opening a Bootstrap modal (eg <a href="http://getbootstrap.com/javascript/#modals" rel="nofollow noreferrer">the GetBootstrap modal sample</a>), the rest of the page is subtly faded out to draw attention to the modal:</p>
  
  <p><img src="https://i.stack.imgur.com/LXPr8.png" alt="enter image description here"></p>
  
  <p>How is Bootstrap accomplishing this? It seems that the class <code>.modal-open</code> is added to the body, but this only sets <code>overflow: hidden</code>. What else is Bootstrap adding/changing to cause that effect? Is the positioning of the modal within the page important?</p>
  
  <p>(This is a roundabout way of asking why my modal <em>isn't</em> fading out the background when it's open. The code is too complicated to post, and presumably there's a flaw in my markup or CSS. If I knew how Bootstrap was accomplishing the opaque background I may be able to debug why it's not working for me.)</p>