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 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
中止javascript执行的方法
Feb 14 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
探索Vue高阶组件的使用
Jan 08 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
js验证密码强度解析
Mar 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
php类常量的使用详解
2013/06/08 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
简明json介绍
2008/09/28 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
python查看zip包中文件及大小的方法
2015/07/09 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
pytorch:model.train和model.eval用法及区别详解
2020/02/20 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
阿联酋团购网站:Groupon阿联酋
2016/10/14 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
善意的谎言事例
2014/02/15 职场文书
村庄绿化方案
2014/05/07 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
办理信用卡工作证明
2014/09/30 职场文书
计算机实训报告总结
2014/11/05 职场文书
信用卡工资证明范本
2015/06/19 职场文书
2019年工作总结范文
2019/05/21 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang