Question

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

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

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

并使用....

<body onload="myOnLoad()">

这样可以有效地删除它后面页面中的滚动条（即它可以做到它应该做的）但是我们还想在模式对话框关闭时将溢出设置回'auto'...

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

<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

好的尝试一下，我认为你的页面正在重新加载点击，从而执行你的onload：

$("#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打开模态对话框时可见滚动条

3 个答案: