12 css dialog modal-dialog scrollbar twitter-bootstrap
对于我的注册域名,我几乎已经完成了一个简单的2页网站.不幸的是,我有一个小问题,我似乎无法解决:当Twitter Bootstrap模式打开和关闭时,一个跳跃的标题.在移动设备上没有问题.该问题仅发生在台式机和笔记本电脑等较大的视口中.
检查下图(Opera,Safari,Firefox和Chrome中的结果相同):
跳头问题http://i58.tinypic.com/opp99l.gif
打开/关闭模态时,我希望标题停止跳跃.滚动条消失的事实不是问题.实际上,我希望它保持这样.
我注意到跳转标题只出现在固定位置元素上,例如我的标题(添加了Bootstrap类navbar-fixed-top).它甚至发生在Bootstrap网站上:http://getbootstrap.com/javascripts.转到桌面上的"Modals> Optional Sizes"区域,然后单击其中一个按钮.你会看到右侧菜单来回跳跃.
当模态打开时,类.modal-open被添加到body元素中(感谢指出@Pred).它在右侧添加了15px的填充,与滚动条装订线的宽度相同.这可以防止身体来回跳跃.
不幸的是,这种填充显然不适用于固定元素.
小智 26
自举增加class="modal-open"和padding-right: 15px;到body时被示出的模态.要删除右移并保持滚动条将其添加到您的CSS:
body.modal-open {
overflow: inherit;
padding-right: 0 !important;
}
尝试在bootstrap 3.3.4
小智 12
我似乎已经找到了解决问题的快速方法.它使用一段javascript为标题添加额外的样式(15px padding-right)以防止它跳转.这可能不是最好的解决方案,但现在它的工作正常.
由于在小于768px(移动)的视口上没有问题,这段代码只会将额外的15px添加到更大的视口,如台式机和笔记本电脑
<script>
$(document).ready(function(){
// Dirty fix for jumping scrollbar when modal opens
$('#requestModal').on('show.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","15px");
}
});
$('#requestModal').on('hide.bs.modal', function (e) {
if ($(window).width() > 768) {
$(".navbar-default").css("padding-right","0px");
}
});
});
</script>
如果你知道一个更好的解决方案(最好只有CSS3),请告诉我.感谢您的帮助!
正如您通常将 Bootstrapnavbar作为容器的直接子级一样body：
<body>
<nav class="navbar navbar-fixed-top">...</nav>
</body>
您也可以使用body padding-rightBootstrap 核心代码中计算的值来防止其在打开模态窗口时“跳转”，从而解决该navbar问题。一个纯CSS的解决方案如下：
.navbar-fixed-top {
padding-right: inherit;
}
就这么简单。