如果弹出窗口打开，防止页面滚动答案

【问题标题】：Prevent scroll of the page if pop-up is open如果弹出窗口打开，防止页面滚动
【发布时间】：2013-03-11 11:38:15
【问题描述】：

我正在使用 jquery 移动弹出窗口。这是页面内部。有一张图片可以打开这个弹出窗口。现在如何防止整个页面仅在弹出窗口打开时滚动并在弹出窗口关闭时允许滚动？

    <a href="#settingsPopUp" data-rel="popup" data-position-to="window" data-inline="true" data-icon="gear"><img src="settings1.jpg" alt="Settings"></a>

    <br>
    <div data-role="popup" id="settingsPopUp" data-theme="a" class="ui-corner-all">
        <div style="padding:10px 20px;">
            <h3>Location Details</h3>               
        </div>          
    </div>

【问题讨论】：

标签： javascript jquery jquery-mobile

【解决方案1】：

我混合了 Lefois 的解决方案和 Simona Adriani 的解决方案。它适用于我的浏览器和手机 WebView (PhoneGap + jquerymobile)。

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

【讨论】：

这是完美的答案，应该被接受。我使用的是相同的，它适用于桌面和移动设备上的所有浏览器。
如果您仍然希望能够在模态对话框中滚动，则此方法不起作用。

【解决方案2】：

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

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

希望对你有帮助！

【讨论】：

它对我有用！谢谢。我使用popupafteropen和popupaftercloseevents。

【解决方案3】：

当模态框打开时，将overflow-y: hidden; 分配给您不想滚动的元素怎么样？（通常是<body>）

【讨论】：

【解决方案4】：

我无法评论以前的答案，但有一点错误。以下代码对我有用：

$( "#mypopup" ).popup({
  afteropen: function( e) {
   $('body').css('overflow','hidden');
  },
  afterclose: function(e) {
   $('body').css('overflow','auto');
  }
});

【讨论】：

【解决方案5】：

有两种方式：

Either "overflow:hidden" the body
Or give a "position:fixed" to the popup so this will scroll in the viewport.

【讨论】：

该样式使弹出窗口在右下角打开，使其看起来很难看。实际上有一个下拉列表（我没有粘贴到代码中），它现在没有被填充。

【解决方案6】：

您可以为弹出小部件使用事件

$( "#settingsPopUp" ).popup({
  afteropen: function( event, ui ) {
   $('body').css({
       overflow:'hidden'
   });
  },
  afterclose: function( event, ui ) {
   $('body').css({
       overflow:'auto'
   });
  }
});

我认为这是一个动态解决方案，它会解决您的问题。

【讨论】：