Stop Main Page from Scrolling on iPad within Scrolling ModalPopup

Using ASP.Net ModalPopupExtenders can improve the user experience, but sometimes introduce some annoying side effects on a Mobile device. On a Mobile device like an iPad, if you have a ModalPopup that has more content than fits the screen, it can require having a scrollbar within the popup. If the main page is also too long for the screen, the main page can have a scroll bar also. The user experience degrades when on an iPad, the user is scrolling down the popup content and they reach the bottom of the popup, continued swiping up to scroll down will then start scrolling the main page down. If the user wants to scroll back up within the popup, they must repeatedly swipe down to first scroll the main page up until the top of the main page is reached at which point the popup content will start scrolling up.

There are a number of search results that “remove the scrollbar” from the main page while the modal popup is open by setting the html and body CSS tags to overflow:hidden, but many mobile devices don’t respect overflow:hidden alone. I found it was also necessary to set position:fixed also. When the popup is closed reset the position to static or inherit and set overflow to auto. I used jQuery to change the CSS tags to hide and show the main page scroll bars.

In my example, I had a div tag with id=”wrapper” in the Master Page surrounding the main page content. I had a ModalPopup window in the WebForm containing a Label (blank text) with a CssClass=”promoVisible” and an OK button with the CssClass=”popupOk”. On the WebForm with the Modal Popup, I used the following jQuery that does all the magic.

$(document).ready(function () {

//had to set position:fixed to work on iPad and other mobile    

   $('.popupOk').click( function(){

      $('#wrapper').css('overflow', 'auto');

      $('#wrapper').css('position', 'inherit');

      //  alert("ok clicked");

   });

   // if the popup is visible, fix the overflow so the

   // background doesn't scroll, only the popup window

   if($('.promoVisible').is(':visible')){

      $('#wrapper').css('overflow', 'hidden');

      $('#wrapper').css('position', 'fixed');

   } else{

      $('#wrapper').css('overflow', 'auto');

      $('#wrapper').css('position', 'inherit');

   }

)};