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)垂直居中的更多相关文章
- Bootstrap3模态框Modal垂直居中样式
1,Bootstrap 模态框插件Bootbox垂直居中样式: <!DOCTYPE html> <html lang="en"> <head> ...
- Bootstrap(v3.2.0)模态框(modal)垂直居中
Bootstrap(v3.2.0)模态框(modal)垂直居中方法: 在bootstrap.js文件900行后面添加如下代码,便可以实现垂直居中. that.$element.children().e ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- 禁用 Bootstrap 模态框(Modal) 点击空白时自动关闭
在做项目的时候,来了这么一个需求,要求打开模态框后,点击空白的地方不让他自动关闭,只能点击关闭按钮才能关闭. 有了需求,就开始查找资料寻求解决的方法. 我找到的解决方法如下: $('#registCo ...
- Bootstrap模态框modal的高度和宽度设置
(1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法
bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...
- JavaScript:bootstrap 模态框的简单应用
最近用上了bootstrap这个强大的前端框架,有空来总结一下.这里记录下模态框的简单应用. 首先,要在页面中引入相应的js.css文件 <link href="css/bootstr ...
- Bootstrap模态框(MVC)
BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...
随机推荐
- js undefine,null 和NaN
undefined 类型只有一个值,即 undefined. null 类型也只有一个值,即 null. null 指空值(empty value)或指曾赋过值,但是目前没有值 undefined 指 ...
- 2005年IT行业趋势Top10
未来三年内对组织有潜在的重大影响IT趋势.这里的IT趋势的摘要: 1. 计算位于任何地方 智能手机,平板,电视盒,可穿戴设备,可连接的屏幕,对于适应移动用户所求要的整体环境的需求在不断增强.这会继续提 ...
- 系统配置文件的加载设置-以xml文件为例
前言:开发中经常会遇到加载一些配置文件信息,这些信息变化的概率很小,不需要实时的更新.这样的信息放在数据库里自然是不合适的,所以最好的办法是写在配置文件中,在程序第一次运行的时候加载到内存,以后用到的 ...
- Java基础学习-- 继承 的简单总结
代码参考:Java基础学习小记--多态 为什么要引入继承? 还是做一个媒体库,里面可以放CD,可以放DVD.如果把CD和DVD做成两个没有联系的类的话,那么在管理这个媒体库的时候,要单独做一个添加CD ...
- C#如何自定义DataGridViewColumn来显示TreeView
我们可以自定义DataGridView的DataGridViewColumn来实现自定义的列,下面介绍一下如何通过扩展DataGridViewColumn来实现一个TreeViewColumn 1 T ...
- Immutable.js – JavaScript 不可变数据集合
不可变数据是指一旦创建就不能被修改的数据,使得应用开发更简单,允许使用函数式编程技术,比如惰性评估.Immutable JS 提供一个惰性 Sequence,允许高效的队列方法链,类似 map 和 f ...
- 第三届“HTML5峰会”变身“iWeb峰会”8月来袭
第三届“HTML5峰会”——2000人规模的“iWeb峰会”将于8月16日在北京召开.本次大会由HTML5梦工场主办,是在前两届“HTML5峰会”基础上的延伸和升华. 三年以来,HTML5梦工场致力于 ...
- 【CSS3】 CSS3:弹性盒子(Flex Box)
Flex布局是什么 如何指定一个容器为Flex布局 Flex的基本语法 display flex-direction justify-content align-items flew-wrap ali ...
- 浅析css布局模型2
上节对整个布局模型进行了概述,这节先谈一下布局模型的几个属性. z-index属性 该属性是检索或设置对象的层叠顺序,默认值为auto,遵循其父对象的定位. 并级的对象,该属性的值越大,则被层叠在最上 ...
- ‘Cordova/CDVPlugin.h’ file not found
phonegap项目,平时真机调试没什么问题.然后想打包成ipa了,去Product --> Archive 一下,然后就报错了,说:‘Cordova/CDVPlugin.h’ file not ...