gpt4 book ai didi

javascript - 从我的 iphone(从触摸屏)访问时,无法在 jQuery 模式弹出窗口内向下滚动

转载 作者:行者123 更新时间:2023-12-01 15:14:48 25 4
gpt4 key购买 nike

我有以下 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>
现在模态弹出窗口将呈现一个局部 View ,当从普通 Windows 机器访问时将显示一个水平工具栏(因为局部 View 有很多水平内容),但是如果我访问 iPhone 内的模态弹出窗口,那么我无法滚动在模态弹出窗口内。如果我尝试向下滚动,我实际上将滚动主页而不是模式弹出窗口。关于如何解决这个问题的任何建议?

最佳答案

您可以这样配置它,当您的模式打开时,将一个类添加到您的 <body>元素以防止其滚动。
在你的 js 中,在你切换模式的地方包含这个:$(document.body).addClass('modal-open');当您的模态打开时执行此操作$(document.body).removeClass('modal-open');当您的模态关闭时执行此操作
然后在您的 CSS 中,您可以将一些样式应用于该特定类:

body.modal-open {
overflow: hidden !important;
position: fixed !important;
}
如果您使用 Bootstrap ,您可以考虑使用 checking this out .我不确定是否仍然如此,我不熟悉 Bootstrap 。

关于javascript - 从我的 iphone(从触摸屏)访问时,无法在 jQuery 模式弹出窗口内向下滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63172663/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com