bootstrap Modal 模态框垂直居中
解决 Modal 垂直居中的问题,上网找了好多博客,有好多说改源码的,这个并没有实践。
但发现另一种解决办法,可以实现,代码如下:
function centerModals(){
$('.modal').each(function(i){
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / );
console.log(top)
$clone.remove();
$(this).find('.modal-content').css("margin-top", top-);
});
}
在 Modal show的时候,回调这个函数
$('#tipModal').modal('show',centerModals());
在窗口变化的时候
$(window).on('resize', centerModals);
效果如下

也可以自己稍微调整下上下高度

bootstrap Modal 模态框垂直居中的更多相关文章
- Bootstrap modal 模态框垂直居中显示补丁
<script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...
- 重置 Bootstrap modal 模态框数据
利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...
- 关于【bootstrap modal 模态框弹出瞬间消失的问题】
前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...
- Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上
问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...
- bootstrap modal模态框的运用
http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...
- 修改bootstrap modal模态框的宽度
原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...
- 设置bootstrap modal模态框的宽度和宽度
(1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...
- bootstrap模态框垂直居中
很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...
- Bootstrap 实例 - 模态框(Modal)插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- strlen、strcmp、strcat、strlen、memmove
#include <cassert> #include <iostream> using namespace std; /* strlen 返回字符串不包含结束符\0的长度 * ...
- java入门经验分享——记面向对象先导课程学习感想
选择在暑期学习面向对象先导课程的初衷是为大二下学期面向对象课程做一些铺垫,接触入门java语言.在接触java的过程中,就编程语言的学习方法而言,我从刚入学时的手慌脚乱四处寻求帮助到现在慢慢养成了自己 ...
- Eclipes 安装windowbuilding
一.找到对应版本的windowbuilder 打开这个链接:http://www.eclipse.org/windowbuilder/download.php eclipse的版本号可以在eclips ...
- Jmeter beanshell断言 org.json.jar包下载
链接:https://pan.baidu.com/s/1O01ODjlKyqmz2NyDT0MCww 提取码:a5va 欢迎关注微信公众号:软件测试汪,qq技术交流群:809111560
- Windows10系统下,如何彻底删除卸载MySQL
本文介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1>停止MySQL服务开始->所有应用->Windows管理工具->服务,将MySQL服务停止.2> ...
- docker内的应用访问宿主机上的mysql和Redis
背景:宿主机部署MySQL.Redis,docker内部署tomcat.jdk 需求:tomcat内的应用访问宿主机的MySQL和Redis 方法: 一.连接地址切记不能用localhost和 ...
- git for windows 2.1版本git bash下git log乱码修复
git bash,输入以下命令git config --global i18n.logoutputencoding utf-8git config quotepath false关闭git bash, ...
- JavaScript去除数组中重复的数字
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- docker--环境搭建
我的电脑是win10,虽然现在win10开始也支持docker,但在linux机器会合适些,所以我先用VMware创建一个linux虚拟机--Centos7 安装虚拟机不多说,现在开始安装docker ...
- JS获取图片的原始宽度和高度,兼容IE7,8
naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高. // 封装function getNat ...