Bootstrap 4 - 打开模式时的背景移动

Posted 2023-03-06

【中文标题】Bootstrap 4 - 打开模式时的背景移动

【英文标题】：Bootstrap 4 - Background move when I open a modal

【发布时间】：2018-12-27 16:31:17

【问题描述】：

你能看到这里吗：

https://live-example.bss.design/ (live example)

当我打开一个模态（单击顶部菜单上的注册，然后单击按钮）时，背景移动，因为模态隐藏了正文溢出。

我怎样才能避免这种情况？

【问题讨论】：

它正在移动，因为在打开模式时滚动条正在被移除。

是的，我知道...这就是我所说的“模态将正文溢出隐藏”的意思

css: html 溢出-y: 滚动；

不适用于 html 标签，实际上这发生在 body 标签上。所以使用这个 body.modal-open overflow: auto;

【参考方案1】：

实际上那个背景没有移动。当 Modal 打开时，它会应用样式

bodyoverflow:hidden;

所以滚动条被禁用。所以窗口扩大了，不仅仅是背景 正在移动。

如果您不喜欢，请使用以下代码，

body.modal-open 
    overflow: auto;
 

【讨论】：

如果刷新示例，当模态很长时会导致双滚动条：live-example.bss.design

第二个滚动条出现是因为您的弹出内容。太长了

是的...当您在表单上放置长模式时，这是一种正常的行为。

您可以将“modal-lg”与“modal-dialog”一起使用，这样您就可以获得很大的弹出窗口。

是的，我知道，但仍然需要滚动条

【参考方案2】：

您可以使用以下代码移除背景移动

.modal-open, body overflow: inherit !important;

【讨论】：

当模态很长时会导致双滚动条

【参考方案3】：

"modal-open" 类被添加到 body。

您需要更改添加 modal-open 的 js。我知道这是一种奇怪的行为，但你必须这样做:)

拦截模态点击以显示并删除类到正文添加到另一个元素：

我。 Modal首先添加到Body中，然后删除并添加到另一个元素中

$('#signUpModal').on('shown.bs.modal', function (e) 
    $(body).removeClass('modal-open');
    $('#otherElement').addClass('modal-open');
);

二。然后还拦截模式的关闭并添加第二次删除的执行：

$('#signUpModal').on('hidden.bs.modal', function (e) 
   $('#otherElement').removeClass('modal-open');
);

你会没事的:)

【讨论】：

有点骇人听闻，但我试过了，但仍然不像我期望的那样移动。 live-example.bss.design

你错过了另一件事，伙计！ padding-right: 17px; 也在body标签内的样式中添加。处理它；）