从我的 iphone（从触摸屏）访问时，无法在 jQuery 模态弹出窗口内向下滚动
Posted
技术标签:
【中文标题】从我的 iphone（从触摸屏）访问时，无法在 jQuery 模态弹出窗口内向下滚动【英文标题】：unable to scroll down inside jQuery modal popup when access from my iphone (from a touch screen) 【发布时间】：2020-07-30 11:57:27 【问题描述】：我有以下 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 内的模态弹出窗口，那么我无法在模式弹出窗口内向下滚动。如果我尝试向下滚动，我实际上将滚动主页而不是模式弹出窗口。关于如何解决此问题的任何建议？
【问题讨论】：
你在使用引导程序吗？ @MosiaThabo 是的，我正在使用引导程序 好的酷，你能试试我提供的答案吗。 你使用的是什么版本的 Bootstrap？ @PedroLudovicoBozzini 引导程序版本 4 【参考方案1】：您可以这样配置，当您的模式打开时，将一个类添加到您的 <body> 元素以防止它滚动。
在你的 js 中，在你切换模式的地方加入这个：
$(document.body).addClass('modal-open'); 当您的模态打开时执行此操作
$(document.body).removeClass('modal-open'); 模态关闭时执行此操作
然后在您的 css 中，您可以将一些样式应用于该特定类：
body.modal-open
overflow: hidden !important;
position: fixed !important;
如果您使用引导程序，您可以考虑使用checking this out。我不确定是否仍然如此，我对引导程序不熟悉。
【讨论】：
我试过你的 CSS ，这完全阻止了在移动设备上滚动，所以如果用户在移动浏览器上打开它，他们看不到整个模式弹出窗口......之前在添加你的代码之前，用户可以滚动，但将滚动主页而不是弹出窗口..对此有何建议？ 您必须在模态样式中添加overflow: auto。因为上面的代码所做的是防止在主页上滚动......你还必须在你的实际模态容器上进一步激活滚动事件。
我添加了这个 css body.modal-open position: fixed; overflow: hidden; left:0; right:0; .modal -webkit-overflow-scrolling: auto; .. 所以我已经添加了 overflow: auto.. 这是正确的吗？
是的，这样当里面的内容比显示长时，你的模态框会添加滚动效果。尝试并提供反馈，以便我提出其他方法。
正如我提到的，我已经添加了这个 css body.modal-open position: fixed; overflow: hidden; left:0; right:0; .modal -webkit-overflow-scrolling: auto; .. so i am already adding overflow: auto ，这将阻止滚动手机内的模式弹出窗口，所以目前用户无法在 iphone 浏览器上查看整个弹出窗口，因为模态弹出窗口是 UN-scrollable ..【参考方案2】：
也许this answer 可以帮助你。对于类似的问题，它建议使用以下 CSS：
body.modal-open
position: fixed;
overflow: hidden;
left:0;
right:0;
.modal
-webkit-overflow-scrolling: auto;
【讨论】：
我试过你的 CSS ，这完全阻止了在移动设备上滚动，所以如果用户在移动浏览器上打开它，他们看不到整个模式弹出窗口......之前在添加你的代码之前，用户可以滚动，但将滚动主页而不是弹出窗口..对此有何建议？以上是关于从我的 iphone（从触摸屏）访问时，无法在 jQuery 模态弹出窗口内向下滚动的主要内容，如果未能解决你的问题，请参考以下文章