How to disable scrolling behind a modal mask on an iPad?

Question

I am creating a web application that should work on an iPad. Now with iOS 5, even scrolling works fine. But my problem is that if I have a modal window, scrolling behind the modal mask is enabled, even if other events are disabled. Does anyone know how I can turn off scrolling behind a modal mask?

Example:

Grid with scrolling enabled:

.z-grid{ overflow: scroll; -webkit-overflow-scrolling: touch; z-index: 1; } 

Modal mask:

 .z-modal-mask { background:#E0E1E3 none repeat scroll 0 0; height:100%; left:0; opacity:0.6; position:absolute; top:0; width:100%; z-index:30000; } 

Answer 1

The z-grid element must have an active position to include the z-index. Try either position: relative; , or position: absolute; . I can’t say for sure which one I don’t see in your markup :)

 .z-grid{ overflow: scroll; -webkit-overflow-scrolling: touch; z-index: 1; position: relative; /*or absolute*/ } 

Answer 2

I looked through a lot of answers regarding disabling body scrolling on iPads for modal, and none of them found suitable, especially when I have a scrollable div on modal, I found this javascript logic combination from another SO user , and then disconnecting the event handler from The pop-up closure did the trick.

In the popup menu / dialog box:

 //uses document because document will be topmost level in bubbling $(document).on('touchmove', function (e) { e.preventDefault(); }); //uses body because jquery on events are called off of the element they are //added to, so bubbling would not work if we used document instead. $('body').on('touchstart', '.scrollable', function (e) { if (e.currentTarget.scrollTop === 0) { e.currentTarget.scrollTop = 1; } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) { e.currentTarget.scrollTop -= 1; } }); //prevents preventDefault from being called on document if it sees a scrollable div $('body').on('touchmove', '.scrollable', function (e) { e.stopPropagation(); }); 

Enable popup / dialog:

 $(document).off('touchmove'); $('body').off('touchstart', '.scrollable'); $('body').off('touchmove', '.scrollable'); 

The scrollable above simply allow the elements you require, the scroll will be freed from logic if the element has this css class.

In my case, I had a scrollable div inside my popup that caused all kinds of problems, so to turn off background scrolling but still allow scrolling in the dialog scrollable div, make sure you add the scrollable class to your scrollable div, so it is ignored.