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. git超详细教程

    GitHub操作总结 : 总结看不明白就看下面的详细讲解. GitHub操作流程 : 第一次提交 : 方案一 : 本地创建项目根目录, 然后与远程GitHub关联, 之后的操作一样; -- 初始化Gi ...

  2. while跟do...while的用法

    while语句的形式: while(逻辑表达式){语句:.......} 执行过程: 先判断逻辑表达式的值.若=true,则执行其后面的语句,然后在次判断条件并反复执行, 直到条件不成立为止. do ...

  3. linux和windows共享文件

    开发板的文档上说可以使用nfs共享文件夹,提供的命令如下: mount –t nfs –o nolock 192.168.1.244:/usr/ /mnt/ 因此我在我的win10上设了共享文件夹,然 ...

  4. petapoco定制,比较SQL事务,存储过程,分布式事务(MSDTC)的区别和场景

    使用分布式事务时 就锁死了,而且是只锁编辑的行 使用.netSQL事务一定要执行了一个CUD的SQL才会锁死,而且也是锁行,但是也锁读的行 .netSQL事务要在这里才锁死 结论,对于产品要求细粒度的 ...

  5. iOS开发数据库篇—FMDB简单介绍

    iOS开发数据库篇—FMDB简单介绍 一.简单说明 1.什么是FMDB FMDB是iOS平台的SQLite数据库框架 FMDB以OC的方式封装了SQLite的C语言API 2.FMDB的优点 使用起来 ...

  6. android studio 编译加速

    1. http://www.52codes.net/article/658.html 2.http://my.oschina.net/sammy1990/blog/388846 3.http://st ...

  7. php数据缓存

    用php进行微信开发时,碰到access_token长久保存的问题,以前都是用框架里的Cache直接set.get一下就完了.现在没框架可用了,只好自己动手写一个cache暂时用. 这个Cache类用 ...

  8. JSON对象如何转化为字符串?

    序列化 定义 指将 JavaScript 值转化为 JSON 字符串的过程. JSON.stringify() 能够将 JavaScript 值转换成 JSON 字符串.JSON.stringify( ...

  9. 单列模式(data与business交互)

    public class CommentsBusiness //Business { #region 单列模式 private static CommentBusiness instance; pri ...

  10. hdu 2736 Surprising Strings(类似哈希,字符串处理)

    重点在判重的方法,嘻嘻 题目 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> int ...