时间戳

首页 > 解决方案 > 从我的 iphone（从触摸屏）访问时，无法在 jQuery 模态弹出窗口内向下滚动

javascript - 从我的 iphone（从触摸屏）访问时，无法在 jQuery 模态弹出窗口内向下滚动

问题描述

我有以下 jQuery 代码来显示我的 asp.net MVC 核心 Web 应用程序中的模式弹出窗口：

$(document).ready(function () {
    $(function () {
        $.ajaxSetup({ cache: false });
        $(document).on('click', 'button[data-modal]', function (e) {
            $('#myModalContent').css({ "margin": "5px", "max-height": screen.height * .82, "max-width": screen.height * .82, "overflow-y": "auto" }).load($(this).attr("data-url"), function () {
                $('#myModal').modal({
                    height: 1000,
                    width: 2200,
                    resizable: true,
                    keyboard: true,
                    backdrop: 'static',
                    draggable: true
                }, 'show');
            });
            return false;
        });
    });
});

和以下 HTML：

 <div id='myModal' class='modal fade in'>
     <div class="modal-dialog">
           <div class="modal-content">
               <div id='myModalContent'></div>
           </div>
     </div>
 </div>

现在模态弹出窗口将呈现一个局部视图，当从普通 Windows 机器访问时将显示一个水平工具栏（因为局部视图有很多水平内容），但是如果我访问 iPhone 内的模态弹出窗口，那么我无法滚动在模态弹出窗口内。如果我尝试向下滚动，我实际上将滚动主页而不是模式弹出窗口。关于如何解决这个问题的任何建议？

标签： javascripthtmljqueryasp.net-core-mvc

解决方案

您可以通过这样的方式配置它，当您的模式打开时，向您的<body>元素添加一个类以防止它滚动。

在你的 js 中，在你切换模式的地方包含这个：

$(document.body).addClass('modal-open');当您的模态打开 $(document.body).removeClass('modal-open');时执行此操作 当您的模态关闭时执行此操作

然后在您的 CSS 中，您可以将一些样式应用于该特定类：

body.modal-open {
  overflow: hidden !important;
  position: fixed !important;
}

如果您使用的是引导程序，您可能会考虑使用检查这个。我不确定是否仍然如此，我不熟悉引导程序。

推荐阅读