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 - HTML的request类
Jan 09 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
javascript 用函数实现继承详解
May 28 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
小程序云函数调用API接口的方法
May 17 Javascript
JavaScript实现网页计算器功能
Oct 29 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
初识Laravel
2014/10/30 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
Javascript正则控制文本框只能输入整数或浮点数
2014/09/02 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python卸载模块的方法汇总
2016/06/07 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
python for和else语句趣谈
2019/07/02 Python
Idea安装python显示无SDK问题解决方案
2020/08/12 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
英国现代绅士品牌:Hackett
2017/12/17 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
股东协议书
2014/04/14 职场文书
2014年司法局工作总结
2014/12/11 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python