javascript - 如果弹出窗口打开，则防止页面滚动

Question

我正在使用 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>

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