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. CS Coder学习asp.net5个月的最大感悟:从http的角度重新认识asp.net(二)——我理解的ajax(二)

    啊哈,时隔两个月,才开始写上一篇文章的后续,实在是惭愧.主要是年尾公司又来活了,忙得团团转,而且这段时间在自学mvc.我在上文中,提到过我对mvc框架的初步印象是:相比webform,算是回归了bs本 ...

  2. QT数据库操作

    浏览: 在QSqlQuery类中当执行exec()后会把指针放在记录集中第一个记录之上,所以需要调用QSqlQuery::next()来获取第一个数据,下面通过循环体来遍历所有表中的数据. while ...

  3. Java设计模式-解释器模式(Interpreter)

    解释器模式是我们暂时的最后一讲,一般主要应用在OOP开发中的编译器的开发中,所以适用面比较窄. Context类是一个上下文环境类,Plus和Minus分别是用来计算的实现,代码如下: public ...

  4. Dedecms最新版本存储型XSS

    由于编辑文章的模板参数 typeid2可控,导致存储XSS发生. dedecms/dede/templets/article_edit.htm页面316-325行代码如下: <tr> &l ...

  5. 夺命雷公狗---Thinkphp----4之数据表的设计

    我们这次来写的项目是仿http://yispace.net/39765.html而写的, 这里其实也就那回事,主要有标题和内容,和栏目, 文章页就更加的简单,其实也就那及格字段即可,我们分享得出的结果 ...

  6. HDU 5918 KMP/模拟

    Sequence I Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  7. gis 导出 dwg,shp

    当我们在webgis 想要把某个地块或者多个地块导出dwg或者shp文件的时候怎么办?这个时候最好就是用后台的方式.首先把web gis上的graphic 的polygon提取为坐标的形式(类似于x, ...

  8. installshield Basic 工程每次安装完提示重启电脑

     将Sequence中的ScheduleReboot Action的Condition清空即可. 

  9. C Primer Plus 第4章 字符串和格式化输入/输出 编程练习

    1. #include <stdio.h> int main(void) { ]; ]; printf("请输入您的名字: "); scanf("%s&quo ...

  10. 问题-[致命错误] Project1.dpr(1): Unit not found: &#39;System.pas&#39; or binary equivalents (DCU,DPU)

    问题现象:[致命错误] Project1.dpr(1): Unit not found: 'System.pas' or binary equivalents (DCU,DPU) 问题原因:由于删除D ...