Question

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

谢谢。

Answer 1

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

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

Answer 2

我假设您正在使用javascript打开您的灯光窗口：

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

您必须在灯光窗口关闭时重置所有内容。

Answer 3

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

Answer 4

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

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

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

.modal-open {
overflow: hidden;
}

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

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

4 个答案: