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

Question

您可以在这里看到吗：

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

当我打开一个模态（单击顶部菜单上的注册，然后单击按钮）时，由于模态将身体溢出隐藏起来，因此背景移动。

如何避免这种情况？

Answer 1

实际上，背景不动。当Modal打开时，它将应用样式

body{overflow:hidden;}

因此禁用了滚动条。因此窗口不仅扩大了背景 正在移动。

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

body.modal-open {
    overflow: auto;
} 

Answer 2

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

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

Answer 3

将

“模态开放” 类添加到 body 。

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

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

i。首先将模态添加到主体，然后将其删除并添加到另一个元素

std::unique_ptr

ii。然后拦截模态的关闭并添加第二个remove的执行：

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

您会没事的：）