防止页面滚动,如果弹出窗口打开
我正在使用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>
当模式框打开时,将overflow-y: hidden;
指定给您不想滚动的元素怎么办? (通常这将是<body>
)
有两种方式:
Either "overflow:hidden" the body
Or give a "position:fixed" to the popup so this will scroll in the viewport.
您可以使用事件弹出窗口小部件
$("#settingsPopUp").popup({
afteropen: function(event, ui) {
$('body').css({
overflow:'hidden'
});
},
afterclose: function(event, ui) {
$('body').css({
overflow:'auto'
});
}
});
我认为这是一个动态的解决方案,它将需要ca你的问题重演。
它不工作。 :( – 2013-03-12 05:02:57
我不能评论以前的答案,但有一个小错误。下面的代码段为我做的伎俩:
$("#mypopup").popup({
afteropen: function(e) {
$('body').css('overflow','hidden');
},
afterclose: function(e) {
$('body').css('overflow','auto');
}
});
对于我这个方法不奏效,它适用于浏览器,但不是在电话间隙应用。所以我解决这个问题:
$('#Popup-id').on({
popupbeforeposition: function(){
$('body').on('touchmove', false);
},
popupafterclose: function(){
$('body').off('touchmove');
}
});
希望它有帮助!
它适用于我!谢谢。我使用'popupafteropen'和'popupafterclose'events。 – oriolparra 2014-10-02 14:41:26
我混了Lefois的解决方案和西莫娜阿德里安尼的解决方案。它适用于浏览器和手机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');
});
这是一个完美的答案,应该被接受。我使用相同的,这适用于所有浏览器在桌面和移动设备 – 2015-07-02 06:24:03
如果您仍然希望能够在模式对话框中滚动,这不起作用。 – Roel 2016-07-14 09:25:39
该款式使得弹出窗口在右下角开放,使其看起来很丑。实际上有一个下拉菜单(我没有粘贴代码),它现在没有被填充。 – 2013-03-12 07:10:15