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 DOM学习第八章 表单错误提示
Feb 19 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
AngularJS快速入门
Apr 02 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
非常实用的12个jquery代码片段
Nov 02 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
详解Vue中的Props与Data细微差别
Mar 02 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使用反射插入对象示例分享
2014/03/11 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
javascript vvorld 在线加密破解方法
2008/11/13 Javascript
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
根据选择不同的下拉值出现相对应的文本输入框
2013/08/01 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
Vue运用transition实现过渡动画
2019/05/06 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
艺术设计专业个人求职信
2014/04/10 职场文书
战略合作意向书
2014/07/29 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年督导工作总结
2014/11/19 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
关于环保的广播稿
2015/12/17 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis