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

Question

Various pages on our website open up JQuery 'Modal Dialog' boxes.我们网站上的各个页面都会打开 JQuery 的“模态对话框”框。

These work fine in every web browser.这些在每个 Web 浏览器中都可以正常工作。

However a problem occurs when viewing on an iPad or iPhone, and i believe this is a common issue.但是，在 iPad 或 iPhone 上查看时会出现问题，我认为这是一个常见问题。

On some pages the modal dialog box is too big for the iPad screen, therefore i need to scroll the modal box.在某些页面上，模态对话框对于 iPad 屏幕来说太大了，因此我需要滚动模态框。

However when I do this dialog box doesnt move, but the background (ie the main screen behind it) scrolls.但是，当我执行此对话框时，该对话框不会移动，但背景（即其背后的主屏幕）会滚动。

I want to disable the background from scrolling when the modal is open but enable the modal dialog to scroll.我想在模态打开时禁用背景滚动但启用模态对话框滚动。

I have tried 'position:fixed' underneath the 'overflow:hidden' which has solved the issue for others, unfortunately for me, the issue still exists.我已经尝试过“溢出：隐藏”下的“位置：固定”，这已经为其他人解决了这个问题，不幸的是，对我来说，这个问题仍然存在。

Does anyone have any other ideas/things that I can try?有没有人有我可以尝试的其他想法/事情？

Below is an example of the code for one of the pages that opens in a modal dialog box.下面是在模式对话框中打开的其中一个页面的代码示例。

Thanks谢谢

<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

I had the issue, lines of code below resolved it for me -我遇到了问题，下面的代码行为我解决了-

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

Answer 2

SOLUTION解决方案

This snippet of code and corresponding link did the trick...这段代码和相应的链接起到了作用......

$(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 个解决方案

解决方案1
16 2017-06-22 12:24:32

解决方案2
1 已采纳 2015-06-05 14:54:28

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

问题描述

2 个解决方案

解决方案1 16 2017-06-22 12:24:32

解决方案2 1 已采纳 2015-06-05 14:54:28

解决方案1
16 2017-06-22 12:24:32

解决方案2
1 已采纳 2015-06-05 14:54:28