2 打开模态对话框时可见的滚动条

Question

我们有一个令人费解的问题，即当我们尝试从父页面打开模式对话框时，它会打开 2 个彼此相邻的垂直滚动条。一个控制模态框，一个控制后面的主页面

有 2 个滚动条并不理想，并已尝试为此实施解决方案。我们在对话框页面中添加了一些 javascript，当模态对话框打开时会将样式设置为 overflow:hidden。

<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');
});

然而，这似乎不起作用，因为模态对话框关闭但滚动条仍然隐藏在主页上。谁能告诉我我在这里做错了什么？我尝试了不同的溢出属性，但似乎没有任何效果

Answer 1

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

您可以尝试直接获取正文 $("body")，假设您要触发点击功能。

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

Answer 2

好的，试试这个，我认为您的页面会在点击时重新加载，从而执行您的加载：

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

Answer 3

将样式添加到正文为

body
{
     padding-right:0px !important;
     overflow-y:hidden !important;
}

2 打开模态对话框时可见的滚动条

2 Scrollbars visible when I open a modal dialog

html

javascript

css

jquery

modal-dialog