首页 > 代码库 > Bootstrap模态框(modal)垂直居中
Bootstrap模态框(modal)垂直居中
http://v3.bootcss.com/
自己也试了改了几种方式也不容乐观,发现在窗口弹出之前是获取不到$(this).height()的值,本想着是用($(window).height()-$(this).height())/2,发现还是不可行。
最终只能研究一下源码了,发现可以在bootstrap.js文件后面添加如下代码,便可以实现垂直居中。
/* ========================================================================
* Bootstrap: modal.js v3.3.0
* http://getbootstrap.com/javascript/#modals
* ========================================================================
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
* ======================================================================== */
找到这个注释的地方没有压缩的版本里面,这样就解决垂直居中的问题了,还会有别的方式解决,这可能只是其中一种
that.$element.css("position", "absolute").css({ "margin":"0px", "padding-top": function () { console.log(that.$element.height()) console.log(that.$element.children().eq(0).height()); return (that.$element.height() - that.$element.children().find(‘.modal-dialog‘).height()-40) / 2 + "px"; } });//在这行的上面/记得不要改变模态状体的样式要不获取不到的 var e = $.Event(‘shown.bs.modal‘, { relatedTarget: _relatedTarget })
Bootstrap模态框(modal)垂直居中
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。