弹出 Modal 时页面抖动, 原因有二:
一、弹窗一出 .modal-open
会添加到body
上,并且改变其尺寸
弹窗前:
<body class="container">
弹窗后:
<body class="container modal-open" style="padding-right: 32px;">
二、弹窗一出页面的滚动条会被隐藏
如果页面原本没有滚动条自然无恙,但是如你原本是滚动条,它一出来给你隐藏了。就造成了抖动的感觉。
解决方案一(修补)
有人说这个可行,但。。。Modal
插件除了添加 modal-open
之外还补了一刀style="padding-right: 32px;"
。并且它添加的时机很巧妙在show.bs.modal
事件之后shown.bs.modal
事件之前。所以就算我想在事件里控制也没卵用,时机对不上。
modal-open { padding-right: 0px !important; }
亲自测试可行的方法:
body {
padding-right: 0px !important;/* 强制设置右侧填充为0,这样弹窗的代码就改不动它了 */
overflow-y: scroll!important;/* 所有页面都显示滚动条 */
}
如果你不想所有页面都强制显示滚动条,那么可以在弹窗显示事件回调中动态判断:
Bootstrap 的模态框事件说明
body {
padding-right: 0px !important;/* 强制设置右侧填充为0,这样弹窗的代码就改不动它了 */
}
$('.modal').on('show.bs.modal',
function() {
$("body").scrollTop(10);//控制滚动条下移10px
if( $("body").scrollTop()>0 ){
$("body").parent().css("overflow-y","scroll");
}
$("body").scrollTop(0);//滚动条返回顶部
}
)
改源码
打开../bootstrap.min.css
样式文件,找到
.modal-open{overflow:hidden;}
改为:
.modal-open{overflow:auto;padding-right:0 !important;}
并没卵用,还是因为上面说的那个补刀。
顺便弹窗居中
// 将弹窗位置定在中间偏上一点
$('.modal').on('show.bs.modal', function (e) {
// 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零
var yoffset = 50; // 从视觉舒适上来讲,绝对居中并不好看要向上偏移一点。
$(this).css('display', 'block');
var modalHeight=$(window).height() / 2 - $(this).find('.modal-dialog').height() / 2 - yoffset;
$(this).find('.modal-dialog').css({
'margin-top': modalHeight
});
});
原文地址:https://blog.csdn.net/jx520/article/details/90238997
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。