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 相关文章推荐
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JS实现鼠标框选效果完整实例
Jun 20 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP错误机制知识汇总
2016/03/24 PHP
php时间计算相关问题小结
2016/05/09 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
Extjs中常用表单介绍与应用
2010/06/07 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
2019/04/04 jQuery
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
django 多数据库配置教程
2018/05/30 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
python音频处理的示例详解
2020/12/23 Python
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
秘书岗位职责
2013/11/18 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
导游词之黄帝陵景区
2019/09/16 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
为什么RedisCluster设计成16384个槽
2021/09/25 Redis