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 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
JS实现太极旋转思路分析
Dec 09 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 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
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
PHP异常处理Exception类
2015/12/11 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
15个款优秀的 jQuery 图片特效插件推荐
2011/11/21 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
require.js的用法详解
2015/10/20 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
windows 下安装nodejs 环境变量设置
2017/02/02 NodeJs
Vue2.0组件间数据传递示例
2017/03/07 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python学习笔记(二)基础语法
2014/06/06 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
python中管道用法入门实例
2015/06/04 Python
TensorFlow的权值更新方法
2018/06/14 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python基于pdfminer库提取pdf文字代码实例
2019/08/15 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
python实现超级玛丽游戏
2020/03/18 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
普天C++笔试题
2016/03/20 面试题
为什么需要版本控制?
2013/08/08 面试题
教师学习培训邀请函
2014/02/04 职场文书
小学课外阅读总结
2014/07/09 职场文书
公司外出活动方案
2014/08/14 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python