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)垂直居中的更多相关文章

  1. Bootstrap(v3.2.0)模态框(modal)垂直居中

    Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...

  2. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  3. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  4. Bootstrap模态框(MVC)

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  5. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  6. js控制Bootstrap 模态框(Modal)插件

    js控制Bootstrap 模态框(Modal)插件 http://www.cnblogs.com/zzjeny/p/5564400.html

  7. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  8. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  9. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

随机推荐

  1. [Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能

    很久没有更新博客了,再不写点东西都烂了. 这次更新一个小内容,是两个插件的组合使用,实现头像上传功能. 业务需求: 头像上传功能,要对上传的文件进行剪切,且保证头像到服务器时必须是正方形的. 优化&l ...

  2. Jquery揭秘系列:Validation实现

    之前讲了一部分揭秘系列的东西,由于年初的时候在改项目,也没有写下去.现在开始闲下来了,会继续写没写完的东西,各种原生js实现Jquery的功能. 转入正题,说一下今天要讲的东西. 相信很多tx在项目里 ...

  3. css 实现三角形 实现过程

     1.纯色的全等的三角形实现 下面的就是实际实现  没有宽高 只有边框 都是透明 根据箭头的方向 给边框方法加颜色  比如需要像右箭头 只需要给border-right-color:颜色值; 即可 c ...

  4. Java面向对象编程之异常处理机制

    一:Java的异常处理机制的优点: 1:把各种不同情况的异常情况分类,使用JAVA类来表示异常情况,这种类被称为异常类.把各种异常情况表示成异常类,可以充分的发挥类的可扩展性和可重用性. 2:异常流程 ...

  5. 【转】HideInInspector 与SerializeField

    http://blog.csdn.net/luyuncsd123/article/details/21563697 [HideInInspector]表示将原本显示在面板上的序列化值隐藏起来. [Se ...

  6. sql 2000以及2005以上获取数据库中所有的表(不包括系统表)

    ---------------------------------------------------------------------------- --sql 2005以上数据库 --- 获取数 ...

  7. WebAPi(selfhost)

    ASP.NET WebAPi(selfhost)之文件同步或异步上传   前言 前面我们讲过利用AngularJs上传到WebAPi中进行处理,同时我们在MVC系列中讲过文件上传,本文结合MVC+We ...

  8. Unity UGUI —— 鼠标穿透UI问题(Unity官方的解决方法)

    解决方案 : http://www.cnblogs.com/fly-100/p/4570366.html 这里我们直接在使用Input.GetMouseButtonDown(0)的地方加了一个检测函数 ...

  9. *[topcoder]PalindromicSubstringsDiv2

    http://community.topcoder.com/stat?c=problem_statement&pm=12967 计算一个字符串里Palindrome的数量.我的DP方法需要n^ ...

  10. HDU 2544 最短路 (最短路,spfa)

    题意:中文题目 思路:spfa+SLF优化.关于SPFA的详情请戳我 #include <bits/stdc++.h> using namespace std; , INF=0x7f7f7 ...