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

【问题标题】：Bootstrap 4 - Background move when I open a modalBootstrap 4 - 打开模式时的背景移动
【发布时间】：2018-12-27 16:31:17
【问题描述】：

你能看到这里吗：

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

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

【问题讨论】：

【解决方案1】：

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

body{overflow:hidden;}

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

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

body.modal-open {
    overflow: auto;
}

【讨论】：

【解决方案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');
});

你会没事的:)

【讨论】：