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)垂直居中

标签：

原文地址：http://www.cnblogs.com/BigMouth/p/5944335.html