最近学到了bootstrap的modal,发现它只是左右居中偏上,并不是垂直居中的,想把它弄成垂直也居中, 查了好多资料无果,最终去google了下,终于找到了合适的答案,转一些外文
方法一:style里加个css
.modal-vertical-centered { transform: translate(0, 50%) !important; -ms-transform: translate(0, 50%) !important; /* IE 9 */ -webkit-transform: translate(0, 50%) !important; /* Safari and Chrome */ }
然后dialog加上这个class就好了
<div class="modal-dialog modal-vertical-centered">
方法二:只加一段js
$(function() { function reposition() { var modal = $(this), dialog = modal.find('.modal-dialog'); modal.css('display', 'block'); //将margin-top定义为窗口高和dialog高的二分之一 dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2)); } // 模块show时,执行 $('.modal').on('show.bs.modal', reposition); // 模块resize时执行 $(window).on('resize', function() { $('.modal:visible').each(reposition); }); });
如果有浏览器不兼容大家再一起讨论
相关推荐
主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到...
本人前端菜鸟,公司项目尝试采用bootstrap,我身先士卒为同事趟“坑”,无奈UI妹子刁难非得让modal弹出框垂直居中,为了前端开发岗位的荣誉,花时间满足之。 最先就是百度咯,方法,就是修改源码 that.$element....
//模态框垂直居中 function centerModals() { $('.modal').each( function(i) { var $clone = $(this).clone().css('display', 'block') .appendTo('body'); var top = Math.round(($clone.height() - $clone...
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下 解决问题:BootStrap自带的模态框不垂直居中 解决方案:调用BootStrap为我们提供的方法$(‘.modal’).on(‘show.bs.modal’, ...
主要介绍了Bootstrap模态框(modal)垂直居中的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
Bootstrap 模态框(Modal)插件 203 用法 203 选项 206 方法 206 事件 208 Bootstrap 下拉菜单(Dropdown)插件 212 用法 212 选项 215 方法 215 Bootstrap 滚动监听(Scrollspy)插件 218 用法 218 选项 221 方法 ...