bootstrap modal弹出框的垂直居中


Posted in Javascript onDecember 14, 2016

本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟“坑”,无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之。

最先就是百度咯,方法,就是修改源码

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";
      }
    });

这里的that.element就是最外层的div.modal ,that.element.children().eq(0)就是div.modal-dialog,无非就是计算里边modal-dialog的left值和height值来让它居中咯,问题来了,你把这段代码加入bootstrap.js的源码(大概1000行左右的样子),可以console到that.element.children().eq(0).width()一直为0,也就是它还没创建,获取不到值,菜鸟拙见,加了个setTimeout 150ms的延迟,倒是获取到了,妥妥的居中,又蹦出两个问题,一个是用户主动拖动窗口大小的时候,它不会跟着自适应,解决方法也很简单写个resize方法;第二个问题是当窗口小于时600时that.element.children().eq(0).width()的值时而对,时而不对(求大神路过帮忙解答),故弃之

想直接解决问题看上边直接忽略

垂直居中考虑到display:table-cell,也受网上的启发,解决方法如下。
重写样式并style标签或外联引入html内

.modal-dialog{display:table-cell;vertical-align:middle;} 
.modal-content{width:600px;margin:0px auto;} 
@media screen and (max-width: 780px) { 
.modal-content{width:400px;} 
} 
@media screen and (max-width: 550px) { 
.modal-content{width:220px;} 
}

将modal触发事件$(‘.modal').modal()改为如下

$('.modal').modal().css({'display':'table','width':'100%','height':'100%'})

改起来很简单,也很暴力,后果就是在任意处点击让modal消失的事件失效了,我搜的资料如是说我搜的资料,但我没看懂咋整

bootstrap modal弹出框的垂直居中

虽然点击叉子和close按钮都可以实现关闭,但是不能让后台同事看不起啊,自己想了想在js里插入两行酱紫的代码

$(触发器).click(function(){          
  $('.modal').modal().css({'display':'table','width':'100%','height':'100%'})//这句触发modal
  $('.modal-backdrop').fadeIn()
  event.stopPropagation();//因为触发的元素肯定在document里边,所以必须阻止冒泡
})
$(document).click(function(){
  $('.modal').hide()
  $('.modal-backdrop').fadeOut()
})

到此,能实现modal的垂直居中,但问题还是有的,modal-backdrop的fadein时间和fadeout时间忽闪忽闪的过于夸张跟原来的还是有点异样,求过路大神,提点。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中dialog属性小记
Sep 03 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
浅析JavaScript回调函数应用
May 22 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
几行js代码实现自适应
Feb 24 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 #Javascript
bootstrap模态框实现拖拽效果
Dec 14 #Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 #Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 #Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 #Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 #Javascript
You might like
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
百度移动版的url编码解码示例
2014/04/29 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
详解JavaScript的变量
2019/04/04 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
[49:40]2018DOTA2亚洲邀请赛小组赛 A组加赛 TNC vs Newbee
2018/04/03 DOTA
python中ConfigParse模块的用法
2014/09/29 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
Python 查看文件的读写权限方法
2018/01/23 Python
Python 实现微信防撤回功能
2019/04/29 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python文件操作的简单方法总结
2019/11/07 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
新东网科技Java笔试题
2012/07/13 面试题
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
实用的简历自我评价
2014/03/06 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
地道战观后感400字
2015/06/04 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
Golang 如何实现函数的任意类型传参
2021/04/29 Golang