Joh*_*ohn 7 html javascript jquery asp.net-core-mvc
我有以下 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 中访问模态弹出窗口，则无法滚动在模态弹出窗口内向下。如果我尝试向下滚动，我实际上将滚动主页而不是模式弹出窗口。关于我如何解决这个问题的任何建议？
你可以这样配置它，当你的模态打开时，向你的 <body>元素以防止它滚动。
在你的 js 上，在你切换模态的地方包含这个：
$(document.body).addClass('modal-open'); 当您的模态打开时执行此操作
$(document.body).removeClass('modal-open');执行此操作 当您的模式关闭时执行此操作
然后在您的 css 中，您可以将一些样式应用于该特定类：
body.modal-open {
overflow: hidden !important;
position: fixed !important;
}
如果您正在使用引导程序，您可以考虑使用check this out。我不确定是否仍然如此，我不熟悉引导程序。
| 归档时间： |
|
| 查看次数： |
603 次 |
| 最近记录： |