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. C# Webbrowser 常用方法及多线程调用

    设置控件的值 /// <summary> /// 根据ID,NAME双重判断并设置值 /// </summary> /// <param name="tagNa ...

  2. 在firefox浏览器下,scrollTop始终为0的问题

    firefox下,带dtd文档申明: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  3. ASP.NET MVC系列:控制器的Edit方法

    在前面我们已经介绍了如何创建控制器.视图和数据模型,运行之前的项目并打开Movies主页,将鼠标悬停在“编辑”菜单上,你会看到浏览器右下角显示了“编辑”链接的地址

  4. 第6届蓝桥杯javaA组第7题,牌型种数,一道简单的题带来的思考

    题目: 小明被劫持到X赌城,被迫与其他3人玩牌. 一副扑克牌(去掉大小王牌,共52张),均匀发给4个人,每个人13张. 这时,小明脑子里突然冒出一个问题: 如果不考虑花色,只考虑点数,也不考虑自己得到 ...

  5. window环境下glog的安装

    window环境下glog的安装 分类: c++2014-09-23 14:12 32人阅读 评论(0) 收藏 举报 下载后解压,利用Visual Studio打开google-glog.sln.生成 ...

  6. 创建Google网站地图Sitemap.xml

    Sitemap.xml是google搞出来的,也就是网站地图,不过这个网站地图是用xml写的,而且要按google的标准来写,并且要将写出来的这个文件sitemap.xml上传到自己的服务器空间中去. ...

  7. php 依赖注入

    对于依赖注入 我现在的理解是把一个方法当成一个变量放进另一个方法的形参里 <?php class Factory { public static function getDb(){ return ...

  8. 实施费用也能DIY--走出软件作坊:三五个人十来条枪 如何成为开发正规军(九)[转]

    上次咱们讲完了开发费用的计算,很多人在后面跟帖在那里算费用. 有人说:你把程序员都不当人,94天,一天都不休息啊. 我想答曰:94天,是工作时间.不算双休日在里面.也就是说,实际的开发周期长度是94+ ...

  9. 今天再分享一个TextView内容风格化的类

    /* * Copyright (C) 2014 Jason Fang ( ijasonfang@gmail.com ) * * Licensed under the Apache License, V ...

  10. JSP EL表达式详细介绍

    一.JSP EL语言定义 E L(Expression Language)  目的:为了使JSP写起来更加简单. 表达式语言的灵感来自于 ECMAScript 和 XPath 表达式语言,它提供了在 ...