当我打开模式对话框时，可以看到2个滚动条

2 Scrollbars visible when I open a modal dialog

本文关键字：滚动条 2个 模式 对话框      更新时间：2024-06-12

我们遇到了一个令人困惑的问题，当我们试图从父页面打开模式对话框时，它会打开两个相邻的垂直滚动条。一个控制模态框，另一个控制它后面的主页

有两个滚动条并不理想，我们已经尝试实现了一个解决方案。我们在对话框页面中添加了一些javascript，当模式对话框打开时，它会将样式设置为溢出：隐藏。

<script>
function myOnLoad() {
    window.parent.$('body').css('overflow', 'hidden');
}

并使用。。。。

<body onload="myOnLoad()">

这是有效的，并有效地删除了它后面页面中的滚动条（即它做了它应该做的事情），但我们也希望在模式对话框关闭时将溢出设置回"自动"…

我们通过添加此代码完成了此操作。。

<script type="text/javascript">
// close Modal
$("#close").click(function () {
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});

然而，这似乎不起作用，因为模式对话框关闭，但滚动条仍然隐藏在主页面上。有人能告诉我我在这里可能做错了什么吗？我尝试过不同的溢出属性，但似乎都不起作用

好吧，试试这个，我认为你的页面在点击时正在重新加载，从而执行你的onload:

$("#close").click(function (e) {
e.preventDefault();
window.parent.$('body').css('overflow', 'auto');
window.parent.$("iframe").attr('src', '');
window.parent.$(".modalDialog").removeClass('show');
});

我认为使用window.parent可能是个问题，因为它指的是iframe的父级，它已经不存在了。或者类似的东西。只需使用jquery

您可以尝试直接获取body$（"body"），因为您正在启动click函数。

编辑：我看到上面已经提到了

将样式添加到正文中作为

body
{
     padding-right:0px !important;
     overflow-y:hidden !important;
}
相关文章：