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 相关文章推荐
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
微信小程序 腾讯地图显示偏差问题解决
Jul 27 Javascript
package.json配置文件构成详解
Aug 27 Javascript
react项目从新建到部署的实现示例
Feb 19 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PDO::rollBack讲解
2019/01/29 PHP
静态的动态续篇之来点XML
2006/12/23 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
JavaScript中__proto__与prototype的关系深入理解
2012/12/04 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Mvc提交表单的四种方法全程详解
2016/08/10 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python中文件遍历的两种方法
2014/06/16 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python环境下安装opencv库的方法
2020/03/05 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
成立公司计划书
2014/05/07 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
面试感谢信范文
2015/01/22 职场文书
学习保证书100字
2015/02/26 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP