How to disable scrolling behind a modal mask on iPad?

Question

I'm creating a web application that should work also on iPad. Now with iOS 5 even the scrolling works OK. But my problem is that if I have a modal window, the scrolling behind the modal mask is enabled, even if other events are disabled. Does anybody know how I can switch off the scrolling behind the modal mask?

Example:

The grid that has scrolling enabled:

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

The 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

I have looked through a lot of answers regarding disabling scrolling of body on iPads behind the modal, and none have been found to be suitable particularly when having a scrollable div on the modal, I found a combination of this javascript logic from another SO user plus then unattaching the event handler on popup close did the trick.

On popup/dialog open:

//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();
});

On popup/dialog close:

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

The mentions of scrollable above just let elements you do require scrolling be exempt from the logic if the element has that css class set.

In my case, I had a scrollable div inside my popup, causing all sorts of issues, so to disable background scrolling but still allow to scroll within the dialog scrollable div, make sure you add a scrollable class to your scrollable div so it is ignored.

Answer 2

The element z-grid needs to have position active to enable z-index. Try either position: relative; or position: absolute; . I can't say exactly which one as I can't see your markup :)

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