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

你能看到这里吗:

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

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

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

【问题讨论】:

  • 它正在移动,因为在打开模式时滚动条正在被移除。
  • 是的,我知道...这就是我所说的“模态将正文溢出隐藏”的意思
  • css: html { 溢出-y: 滚动; }
  • 不适用于 html 标签,实际上这发生在 body 标签上。所以使用这个 body.modal-open { overflow: auto; }

标签: css twitter-bootstrap bootstrap-4 bootstrap-modal


【解决方案1】:

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

body{overflow: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标签内的样式中添加。处理它;)
猜你喜欢
  • 1970-01-01
  • 2023-01-16
  • 1970-01-01
  • 1970-01-01
  • 2016-05-25
  • 1970-01-01
  • 2017-05-16
  • 1970-01-01
相关资源
最近更新 更多