[英]iPad, iPhone modal dialog scrolling issue
我们网站上的各个页面都会打开 JQuery 的“模态对话框”框。
这些在每个 Web 浏览器中都可以正常工作。
但是,在 iPad 或 iPhone 上查看时会出现问题,我认为这是一个常见问题。
在某些页面上,模态对话框对于 iPad 屏幕来说太大了,因此我需要滚动模态框。
但是,当我执行此对话框时,该对话框不会移动,但背景(即其背后的主屏幕)会滚动。
我想在模态打开时禁用背景滚动但启用模态对话框滚动。
我已经尝试过“溢出:隐藏”下的“位置:固定”,这已经为其他人解决了这个问题,不幸的是,对我来说,这个问题仍然存在。
有没有人有我可以尝试的其他想法/事情?
下面是在模式对话框中打开的其中一个页面的代码示例。
谢谢
<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>
我遇到了问题,下面的代码行为我解决了-
html{
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
解决方案
这段代码和相应的链接起到了作用......
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.