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> ...
随机推荐
- 【git】git的内部原理
参考文章:https://zhuanlan.zhihu.com/p/96631135 参考文章:https://marklodato.github.io/visual-git-guide/index- ...
- ES6数组中删除指定元素
知识点: ES6从数组中删除指定元素 findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引.否则返回-1. arr.splice(arr.findIndex(item => ...
- 33. 构建第一个job
1.点击 New Item 2.Enter an item name 输入一个name,点击Freestyle project 3.我们可以输入一个描述,点击Advanced 4.勾选Use cust ...
- LeetCode题:旋转链表
原题: 给定一个链表,旋转链表,将链表每个节点向右移动 k 个位置,其中 k 是非负数. 示例 1: 输入: 1->2->3->4->5->NULL, k = 2输出: ...
- java多线程学习笔记(三)
java多线程下的对象及变量的并发访问 上一节讲到,并发访问的时候,因为是多线程,变量如果不加锁的话,会出现“脏读”的现象,这个时候需要“临界区”的出现去解决多线程的安全的并发访问.(这个“脏读”的现 ...
- Config JAVA evironment for LoadRunner
1. Install jdk 2. Set system variables eg. JAVA_HOME = C:\Program Files (x86)\Java\jdk1.6.0_43 class ...
- jwt token校验获取用户数据
/** * 用户登录成功之后,获取用户信息 * 1.获取用户id * 2.根据id查询用户 * 3.构建返回值对象 * 4.返回数据 * @return */@RequestMapping(value ...
- 关于 AfxGetStaticModuleState ()
写MFC的DLL的时候,总会在自动生成的代码框架里看到提示,需要在每一个输出的函数开始添加上AFX_MANAGE_STATE (AfxGetStaticModuleState()).一直不明白这样做的 ...
- Linux NIO 系列(04-2) poll
目录 一.select 和 poll 比较 二.poll API 附1:linux 每个进程IO限制 附2:poll 网络编程 Linux NIO 系列(04-2) poll Netty 系列目录(h ...
- python_django_上传文件
存储路径: 存储在服务器的项目的static/upfile(你说了算的文件名,但是一般俺们叫这个)文件中 配置: 配置settings.py文件 MDEIA_ROOT = os.path.join(B ...