时间戳

首页 > 解决方案 > 模态打开时防止正文滚动并跳转到顶部

css - 模态打开时防止正文滚动并跳转到顶部

问题描述

我一直在尝试许多解决方案，但我似乎无法完成这项工作。

我找到了一个解决方案，可以防止模式打开时正文滚动：

body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

这工作正常。问题是，当我打开模式时，正文会滚动到顶部。我不想要这种行为，我知道它与位置有关：固定。我试过亲戚，它没有用。

提前致谢。

标签： cssbootstrap-4bootstrap-modal

解决方案

如果我理解你，你可以用 Bootstrap 做这样的事情：

// Avoid scrolling
body.modal-open, .modal-open .modal {
  overflow: hidden;
}

然后将模态添加.modal-dialog-centered到.modal-dialog垂直居中。

https://jsfiddle.net/4938ek6q/

请在上面链接的示例中调整结果窗口的大小，以检查这是否是您要查找的内容。

希望这对您有所帮助或至少为您指明正确的方向:)

推荐阅读