Bootstrap模态框(modal)垂直居中的实例代码


Posted in Javascript onAugust 18, 2016

Bootstrap官网下载:http://v3.bootcss.com/

今天就在使用Bootstrap框架中遇到的一个问题分享一下,在产品开发的过程中使用了大量的弹出窗口(modal)。

刚开始学习使用的过程中就发现此窗口不能垂直居中,总是偏上,并且不能拖动,看了一下使用说明也没有提供过多的属性设置和方法,就这样使用默认的方式一直用着。最近,客户却提出了一个要求:能不能让弹出窗口居中,因为一些小的窗口偏上总感觉整体页面失衡,大一点的还过得去。

因为之前对Bootstrap也不是很熟悉,便开始baidu、google,发现只有很少的解决方案,如下:

$("#myModal").modal().css({
"margin-top": function () {
return - ($(this).height() / 2);
}
});

参考地址:http://www.g2w.me/2012/06/bootstrap-modal-shown-in-the-center/

这种方法自己试了一下,并不能完全居中,并且窗口的大小不一样的话,每次显示的margin-top值也会改变,遮盖层还会出现滚动条,效果也不好看。

自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行。

最终只能研究一下源码了,发现可以在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中。

that.$element.children().eq(0).css("position", "absolute").css({
"margin":"0px",
"top": function () {
return (that.$element.height() - that.$element.children().eq(0).height()-40) / 2 + "px";
},
"left": function () {
return (that.$element.width() - that.$element.children().eq(0).width()) / 2 + "px";
}
});

页面代码如下:

<div>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>

 效果图如下:

Bootstrap模态框(modal)垂直居中的实例代码

以上所述是小编给大家介绍的Bootstrap模态框(modal)垂直居中的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
javascript创建含数字字母的随机字符串方法总结
Aug 01 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
微信小程序 标签传入数据
May 08 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
微信小程序实现图片上传
May 23 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
js 获取站点应用名的简单实例
Aug 18 #Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 #Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 #Javascript
AngularJS 整理一些优化的小技巧
Aug 18 #Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 #Javascript
js获取form表单所有数据的简单方法
Aug 18 #Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 #Javascript
You might like
PHP4和PHP5共存于一系统
2006/11/17 PHP
php实现Mysql简易操作类
2015/10/11 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
jQuery 操作XML入门
2008/12/25 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
bootstrap IE8 兼容性处理
2017/03/22 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
js实现图片推拉门效果代码实例
2019/05/18 Javascript
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
python list使用示例 list中找连续的数字
2014/01/27 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
某同学的自我鉴定范文
2013/12/26 职场文书
会计岗位职责范本
2014/03/07 职场文书
数学教师个人总结
2015/02/06 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
超市员工辞职信范文
2015/05/12 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书