android - 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

这个问题有一个简单的解决方法。只是在弹出窗口处于活动状态时防止页面滚动。

工作jsFiddle示例：http: //jsfiddle.net/Gajotres/aJChc/

为此，弹出窗口需要有一个属性：data-dismissible="false"当在弹出窗口外部单击时，它将防止弹出窗口关闭。可以使用另一个属性：data-overlay-theme="a"它将为弹出覆盖 div 着色。这是一个 DIV，它在弹出窗口打开时覆盖屏幕并防止弹出窗口关闭。

这个 javascript 将适用于所有可能的弹出窗口：

$(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

对我来说，这种方法不起作用，它适用于浏览器，但不适用于 Phone Gap 应用程序。所以我以这种方式解决它：

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

希望能帮助到你！

Answer 3

如果不阻止正文滚动，请尝试以下操作。就我而言，我使用的是boilerplate.css，因此防止正文滚动不起作用。

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