时间:2021-05-28
本人前端菜鸟,公司项目尝试采用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触发事件$(‘.modal').modal()改为如下
$('.modal').modal().css({'display':'table','width':'100%','height':'100%'})
改起来很简单,也很暴力,后果就是在任意处点击让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时间忽闪忽闪的过于夸张跟原来的还是有点异样,求过路大神,提点。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一.结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的
模态弹出框依赖于Bootstrap提供的js文件,可以单独引入modal.js,也可以直接引入bootstrap.js。模态弹出框的结构Bootstrap框架中
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下解决问题:BootStrap自带的模态框不垂直居中解决方案:调用Boo
整理自慕课笔记插件的源文件:modal.js。在Bootstrap框架中把模态弹出框统一称为Modal。这种弹出框效果在大多数Web网站的交互中都可见。比如点击
bootstrap下的弹出框加载select2框架失败的解决方案如下所示:$("#modal").on("shown.bs.modal",function(){