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 相关文章推荐
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
js获取html文件的思路及示例
Sep 17 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
详解javascript new的运行机制
Jan 26 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
BootStrap入门教程(一)之可视化布局
Sep 19 Javascript
AngularJS 过滤器(自带和自建)详解
Sep 19 Javascript
详解node.js平台下Express的session与cookie模块包的配置
Apr 26 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
Node.js操作MongoDB数据库实例分析
Jan 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
css图片自适应大小
2007/11/28 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
Prototype框架详解
2015/11/25 Javascript
JS实现消息来时让网页标题闪动效果的方法
2016/04/20 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python入门篇之文件
2014/10/20 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
通过python3实现投票功能代码实例
2019/09/26 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
啤酒销售实习自我鉴定
2013/09/24 职场文书
中学清明节活动总结
2014/07/04 职场文书
公司授权委托书范文
2014/08/02 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
爱国主义主题班会
2015/08/14 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书