title: Content layering and disabling scroll on layers having low priority z-index
body: <p>I am working on a mobile application using HTML5, CSS3, JqueryMobile, which requires a screen to be blocked from all events as soon as submit button is clicked.</p>
  
  <p>I have 2 div in the body as follows:</p>
  
  <pre><code>&lt;div data-role=page id=p1&gt;
      content of the page goes here  
  &lt;/div&gt;
  
  &lt;div id=inputBlocker&gt;&amp;nbsp;&lt;/div&gt;
  </code></pre>
  
  <p>This input blocker is added on fly to the body when submit button is clicked on page p1.</p>
  
  <p>The CSS for inputBlocker is as follows:</p>
  
  <pre><code>#inputBlocker {
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      z-index:99999999;
  }
  </code></pre>
  
  <p>This solution helps me with blocking any input events when submit button is clicked.
  But the problem is that if page p1 has more content that does not fit into the screen, it scrolls. Now, when the user taps on submit button, page p1 is disabled by the input blocker, but still the user is able to scroll page p1. Is there a possiblity to stop this scroll effect?</p>