ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Bootstrap 使用弹窗 Modal 时页面抖动

2019-05-15 17:56:00  阅读:356  来源: 互联网

标签:body right Modal Bootstrap 滚动条 modal open 弹窗


弹出 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
	    });
	});

标签:body,right,Modal,Bootstrap,滚动条,modal,open,弹窗
来源: https://blog.csdn.net/jx520/article/details/90238997

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有