title: lock parent window from scrolling when modal is displaying
body: <p>I am trying to prevent the user from scrolling the parent window when a modal is displayed over it.</p>
  
  <p>It is an issue when users view the modal on a iPad, when they click and drag outside of the content div or scrollbar within the modal, then it scrolls the (parent) page below it.</p>
  
  <p>I think once the modal is opened, I can add some css to the body tag or main container to disable scrolling by giving it a overflow: hidden; and removing it once the modal is closed. Any suggestions are welcomed, thanks.</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
    &lt;a href="#" class="open-modal"&gt;Open modal&lt;/a&gt;
    &lt;div class="modal"&gt;Content&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE: I used this <a href="http://www.bcreatives.com.au/blog/enabledisable-scrolling-in-iphoneipads-safari-browser.html" rel="nofollow">http://www.bcreatives.com.au/blog/enabledisable-scrolling-in-iphoneipads-safari-browser.html</a> to disable it on iOS devices and also added overflow: hidden; to the body and removed it when the user closed the modal.</p>