Popup menu scroll with the page in jquerymobile

Question

I have create an popup menu in my app the problem with it is when i open the popup menu and then scroll the page the popup menu also scrolls up with the page even i tried using data-dismissible="false" but nothing happen still the problem remains same. Thanks in advance.

Answer 1

There's an easy fix for this problem. Just prevent page scrolling when popup is active.

Working jsFiddle example: http://jsfiddle.net/Gajotres/aJChc/

For this to work popup needs to have an attribute: data-dismissible="false" it will prevent popup closure when clicked outside of it. Another attribute can be used: data-overlay-theme="a" it will color popup overlay div. That is a DIV that covers screen when popup is opened and prevents popup closure.

And this javascript will work on every possible popup:

$(document).on('popupafteropen', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','hidden');
}).on('popupafterclose', '[data-role="popup"]' ,function( event, ui ) {
    $('body').css('overflow','auto');
});

Answer 2

For me this method didn't work, it works on browser but not in Phone Gap application. So I resolve it in this way:

$('#Popup-id').on({
   popupbeforeposition: function(){
      $('body').on('touchmove', false);
   },
   popupafterclose: function(){
      $('body').off('touchmove'); 
  }
});

Hope it helps!

Answer 3

if body scrolling is not prevented, try below. in my case i was using boilerplate.css so the preventing the body scrolling not worked.

 popupafteropen: function (e) {
               $('html').css('overflow', 'hidden');
            },
            popupafterclose: function (e) {
                $('html').css('overflow', 'auto');              
            }