iPad、iPhone 模态对话框滚动问题答案

【问题标题】：iPad, iPhone modal dialog scrolling issueiPad、iPhone 模态对话框滚动问题
【发布时间】：2015-06-04 14:23:17
【问题描述】：

我们网站上的各个页面都会打开 JQuery 'Modal Dialog' 框。

这些在每个网络浏览器中都能正常工作。

但是在 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>

【问题讨论】：

请在codepen.io上添加工作代码sn-p。
别担心，我找到了问题的答案。
那么您应该发布自己问题的答案或将其删除。
这个 sn-p 的代码和相应的链接起到了作用...forum.jquery.com/topic/problem-with-dialog-scroll-on-ipad
How to prevent background scrolling when Bootstrap 3 modal open on mobile browsers?的可能重复

标签： javascript jquery html ios

【解决方案1】：

我遇到了问题，下面的代码行为我解决了问题 -

html{ 
    overflow: scroll; 
    -webkit-overflow-scrolling: touch;
}

【讨论】：

对我来说它没有：溢出：滚动；但只需使用 -webkit-overflow-scrolling: touch;

【解决方案2】：

解决方案

这个sn-p代码和对应的link成功了……

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

【讨论】：