模态窗口打开时隐藏正文页面的滚动答案

【问题标题】：Hide scroll of body page when modal window is open模态窗口打开时隐藏正文页面的滚动
【发布时间】：2012-03-07 17:53:52
【问题描述】：

从css打开模态窗口时是否可以删除正文页面的滚动？
例如我的正文页有一个高度：200%，所以如果我想进入页面底部，我必须使用滚动（溢出-y：自动）。现在，如果我要打开一个模态窗口，则正文页面的滚动保持活动状态，我希望在打开模态窗口时将其禁用。

谢谢。

【问题讨论】：

如果您将position:fixed 用于模态窗口，即使用户向上或向下滚动，它也会保留在屏幕上。
是的，我知道我已经有了 position:fixed on modal 但我想禁用正文页面的滚动。

标签： html css overflow

【解决方案1】：

或者只是在脚本中添加和删除类：

$('body').addClass('modal-open'); //when modal is open
$('body').removeClass('modal-open'); //when modal is closed

然后您可以转到您的 css 文件并添加多个 css 样式。隐藏滚动条使用：

.modal-open {
overflow: hidden;
}

尤其是当你想改变更多的东西时，我更喜欢这种方式，但这是我的看法。使用任何你喜欢的东西！

【讨论】：

【解决方案2】：

如果您在单击链接时打开模式窗口，您可以执行以下操作：

// modal screen activate
$('a').live('click', function(){
modalScreen.show();
$('body').css('overflow','hidden');
});

// modal screen de-activate
$('body, html').live('click', function(){
modalScreen.hide();
$('body').css('overflow','auto');
});

【讨论】：

【解决方案3】：

使用position:fixed 并将left 和top 设置为百分比，然后将margin-left 设置为宽度的负值（以像素为单位）。例如width: 700px; left: 50%, margin-left: -350px; 以水平居中。

【讨论】：

【解决方案4】：

我假设你正在使用 javascript 打开你的 lightwindow：

您可以将 body 的高度设置为 100% 并将 overflow-y 设置为隐藏。这将删除滚动条。

您必须在关闭 lightwindow 时重置所有内容。

【讨论】：

我使用检票口，是的，模态窗口后面是一个大型 javascript，我不想修改它。出于这个原因，我尝试找到一种方法来使用 css 或 jQuery 禁用正文页面的溢出。
你可以使用jQuery设置任何你想要的css： $('body').css({'height': '100%', 'overflow-y': 'hidden'});像这样的东西应该可以解决问题（未经测试）。