Question

我们网站上的各种页面打开了JQuery“模态对话框”。

这些在每个网络浏览器中都能很好地工作。

然而，在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>

Answer 1

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

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

Answer 2

解

这段代码和相应的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'
            });
        });
})

iPad，iPhone模态对话框滚动问题

2 个答案: