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');

   }

)};

Ajax Control Toolkit Modal Popup CSS Styling issue

I found an interesting (and aggravating) difference between running a web application in the built-in Visual Studio 2010 development server vs. IIS 7 when using the Asp.Net 3.5 Ajax Control Toolkit ModalPopupExtender control. In the built-in web server (screenshot 1), the CSS formatting did not render correctly as it did in the application hosted in IIS7 (screenshot 2). Initially I used the standard styles you will find on the toolkit sample code.

Hopefully this will help some of the many other people that had the same problem.

Click the screenshots for enlarged views. The code used follows the screenshots.

ManagePeople.aspx

<asp:ModalPopupExtender ID="pnlModalNew_ModalPopupExtender" runat="server" 

    DynamicServicePath="" Enabled="True" TargetControlID="btnNew"  PopupControlID="pnlModalNew"

    BackgroundCssClass="modalBackground" DropShadow="true" 

    CancelControlID="btnCancel" >

</asp:ModalPopupExtender>

Styles.css

/* Modal Popup */

.modalBackground {

    background-color:Gray;

    filter:alpha(opacity=70);

    opacity:0.7;

}

.modalPopup {

    background-color:#ffffdd;

    border-width:3px;

    border-style:solid;

    border-color:Gray;

    padding:3px;

    width:250px;

}

The Panel pnlModalNew referenced by the ModalPopupExtender that contains the data entry form fields had the CssClass style set to .modalPopup.

User Interface Design Patterns

User interface is as important as good coding practices. Here is a link to 40 Helpful Resources in UI Design Patterns.

Smileycat design elements showcase provides good food for thought for a variety of common page elements.