我们网站的各个页面都可以打开jQuery“模态对话框”。
它们可以在所有的浏览器中正常工作。
然而,在iPad或iPhone上查看时,出现了一个问题,我认为这是一个常见的问题。
在某些页面上,模态对话框太大,无法适应iPad屏幕,所以我需要滚动模态对话框。
但当我这样做时,对话框并不会移动,而是背景(即主屏幕)会滚动。
我希望在模态打开时禁用背景滚动,同时允许模态对话框滚动。
我已经尝试在“overflow:hidden”下方使用“position:fixed”来解决此问题,但对我来说,问题仍然存在。
是否有任何其他想法/可以尝试的事情?
以下是打开模态对话框的一个页面的代码示例。
谢谢。
它们可以在所有的浏览器中正常工作。
然而,在iPad或iPhone上查看时,出现了一个问题,我认为这是一个常见的问题。
在某些页面上,模态对话框太大,无法适应iPad屏幕,所以我需要滚动模态对话框。
但当我这样做时,对话框并不会移动,而是背景(即主屏幕)会滚动。
我希望在模态打开时禁用背景滚动,同时允许模态对话框滚动。
我已经尝试在“overflow:hidden”下方使用“position:fixed”来解决此问题,但对我来说,问题仍然存在。
是否有任何其他想法/可以尝试的事情?
以下是打开模态对话框的一个页面的代码示例。
谢谢。
<script>
function myOnLoad() {
window.parent.$('body').css('overflow', 'hidden');
}
</script>
<body onload="myOnLoad()">
<div class="wrapper">
<div id="popup" class="modalDialog2">
<!--DIALOG CONTENT HERE-->
</div>
</div>
<script type="text/javascript">
// close Modal
$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src');
window.parent.$(".modalDialog").removeClass('show');
});
</script>