当我在页面中触发模态视图时,它会触发滚动条消失。这是一个令人讨厌的效果,因为当模态移入/消失时背景页面开始移动。有没有治愈这种效果的方法?
引导模式删除滚动条
IT技术
javascript
twitter-bootstrap
modal-dialog
2021-02-23 20:15:08
6个回答
这是一个功能,当您显示模态时,类modal-open
会被添加到 HTML 中body
,并在您隐藏它时被移除。
这使得滚动条消失,因为引导 css 说
.modal-open {
overflow: hidden;
}
您可以通过指定覆盖它
.modal-open {
overflow: scroll;
}
在你自己的css中。
我认为继承比滚动更好,因为当你打开模态时,它总是会随着滚动而打开,但是当你没有任何滚动时,你会遇到同样的问题。所以我只是这样做:
.modal-open {
overflow: inherit;
}
最好使用 overflow-y:scroll 并从正文中删除填充,引导模式向页面正文添加填充。
.modal-open {
overflow:hidden;
overflow-y:scroll;
padding-right:0 !important;
}
IE浏览器兼容: IE浏览器默认做同样的事情。
我用了
.modal-open {
overflow-y: scroll;
}
在这种情况下,您避免显示水平滚动条
感谢上帝,我看到了这篇文章!我正在拉我的头发,试图弄清楚如何在使用我自己的关闭链接关闭窗口时恢复我的滚动条。我尝试了 CSS 的建议,但它无法正常工作。看完之后
当您显示模态时,类 modal-open 会被添加到 HTML 正文中,并在您隐藏它时被移除。-- @flup
我想出了一个使用 jquery 的解决方案,所以如果其他人有同样的问题并且上述建议不起作用 -
<script>
jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
jQuery('body').removeClass('modal-open');
});
});
</script>