Question

我在我的应用程序中创建了一个弹出菜单问题是当我打开弹出菜单然后滚动页面弹出菜单也向上滚动页面，即使我尝试使用data-dismissible =“false”但没有发生的问题仍然存在。提前谢谢。

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

弹出菜单滚动jquerymobile中的页面

3 个答案: