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 ...
随机推荐
- 通过“回文字算法”复习C++语言。
一.什么是回文字 给定一个字符串,从前往后读和从后往前读,字符串序列不变.例如,河北省农村信用社的客服电话是“96369”,无论从后往前读,还是从前后往后读,各个字符出现的位置不变. 二.功能实现 ( ...
- 缓存MEMCACHE 使用原子性操作add,实现并发锁
memcache中Memcache::add()方法在缓存服务器之前不存在key时, 以key作为key存储一个变量var到缓存服务器.我们使用add来向服务器添加一个键值对应,如果成功则添加,否则说 ...
- java注释规范
前言: 现在java的出产地sun公司并没有定义一个java注释规范,注释规范目前是每个公司自己有自己的一套规范,主要是为了团队之间的协作. 1.基本规则 1.注释应该使代码更加清 ...
- struts工程建立配置细节
ActionForm ActionForm是用于存放表单提交的数据. 1.一个action是否必须配置一个actionForm,可以没有2.一个action是否可以配置多个表单?不可以,最多一个 在j ...
- Xamarin 手动安装步骤+破解(最新版Xamarin V3)
Create native iOS, Android, Mac and Windows apps in C#. 看到这句话,你就知道Xamarin是什么了,对于C#开发者,这样的标语还是会让你激动一下 ...
- php代码美化/格式化 还原 -问题
使用某个PHP代码格式化的工具.源代码: if ($this->_standardize_newlines == TRUE) { if (strpos($str, "\r") ...
- Swiper教程 —— 使用方法
Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...
- Problem with WinRM on Exchange 2013 Management Shell and Exchange Toolbox on a new exchange 2013 with CAFE and BE on single server installation
While deploying MS Exchange 2013 I experienced issues with accessing the Exchange Management Shell a ...
- MVC的优点及不足之处
1. MVC的优点 (1) 可以为一个模型在运行时同时建立和使用多个视图.变化-传播机制可以确保所有相关的视图及时得到模型数据变化,从而使所有关联的视图和控制器做到行为同步. (2) 视图与控制器的可 ...
- error=Error Domain=NSURLErrorDomain Code=-1003
我的情况:模拟器 可以返回数据 .真机不可以.我手机连接的同事的共享,我以为他的网段和后台的网段在同一个网段.一直在找错误,打开手机网络设置一看 ,原来不在同一网段.手机的网络必须要跟PC的在同一个 ...