DDR爱好者之家

bootstrap modal弹出框的垂直居中
站长资源 2024/11/28 佚名
46 1538
DDR爱好者之家 Design By 杰米

本人前端菜鸟，公司项目尝试采用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时间忽闪忽闪的过于夸张跟原来的还是有点异样，求过路大神，提点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米