0

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.

I have 2 div in the body as follows:

<div data-role=page id=p1>
    content of the page goes here  
</div>

<div id=inputBlocker>&nbsp;</div>

This input blocker is added on fly to the body when submit button is clicked on page p1.

The CSS for inputBlocker is as follows:

#inputBlocker {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999999;
}

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?

Icarus
  • 1,627
  • 7
  • 18
  • 32
AAV
  • 61
  • 1
  • 5

1 Answers1

0

I see you have a creative solution, to put something in front and therefore block all inputs...

Consider this more built in solution:

pointer-events="none"

as an attribute to an HTML div, or to the html or body tag itself. You can use javascript to enable it. I am pretty sure you can use it as a CSS property too.

mareoraft
  • 3,474
  • 4
  • 26
  • 62
  • Thanks. But, this solution does not work. Even though I set the events to none, I am able to scroll the page – AAV Apr 17 '14 at 17:02
  • This setting is for POINTER events, that is, your mouse pointer. It therefore will disable click events, drag events, and hover events. – mareoraft Apr 18 '14 at 02:46
  • For scrolling, take a look at [this](http://stackoverflow.com/questions/19817899/jquery-or-javascript-how-to-disable-window-scroll-without-overflowhidden) answer by Glen Swift. – mareoraft Apr 18 '14 at 02:57
  • To be clear, POINTER events does NOT include scrolling. Sorry for the confusion. – mareoraft Apr 18 '14 at 02:57