iPad、iPhone 模態對話框滾動問題

Question

我們網站上的各個頁面都會打開 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>

Answer 1

我遇到了問題，下面的代碼行為我解決了-

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

Answer 2

解決方案

這段代碼和相應的鏈接起到了作用......

$(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