解决 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 模态框垂直居中的更多相关文章

  1. Bootstrap modal 模态框垂直居中显示补丁

    <script> $.fn.modal.Constructor.prototype.adjustDialog1 = function(){ var modalIsOverflowing = ...

  2. 重置 Bootstrap modal 模态框数据

    利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...

  3. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  4. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  5. bootstrap modal模态框的运用

    http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...

  6. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  7. 设置bootstrap modal模态框的宽度和宽度

    (1)修改宽度可以通过修改modal中的modal-dialog这个div宽度实现 <div class="modal-dialog" style="width:6 ...

  8. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  9. Bootstrap 实例 - 模态框(Modal)插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. spring mvc 使用freemark配置

    直接在配置中加入 <mvc:annotation-driven/> <!--freemark--> <bean id="freemarkerConfig&quo ...

  2. spring mvc 接入cas登录

    费劲千辛万苦开发出来的系统要接入sso 让我头大还好有大佬帮忙 首先在配置文件中写入启动的ip地址 HOST=http://127.0.0.1:8080/ 地址写你的地址和端口 然后在pom文件中导入 ...

  3. 用 Flask 来写个轻博客 (14) — M(V)C_实现项目首页的模板

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 实现所需要的视图函数 实现 home.html 模板 代码分析 实现效 ...

  4. client-go获取k8s集群内部连接,实现deployment的增删改查

    一开始写了一个client-java版本的,但是java放在k8s集群上跑需要装jvm而且java的包比较大,client-go版本更适合主机端,下面是整个实现 说明:k8s官方维护的客户端库只有go ...

  5. jekyll介绍安装.github静态页面工具

    jekyll build # => 当前文件夹中的内容将会生成到 ./site 文件夹中. $ jekyll build --destination <destination> # ...

  6. SQL 测验题目(30道)

    1.SQL 指的是? 您的回答:Structured Query Language 2.哪个 SQL 语句用于从数据库中提取数据? 您的回答:SELECT 3.哪条 SQL 语句用于更新数据库中的数据 ...

  7. js预编译的四部曲

    众所周知javascript是解释性语言,主要特点为解释一行执行一行. 而在js运行时会进行三件事:1语法分析  2.预编译  3.解释执行 语法分析会在代码执行前对代码进行通篇检查,以排除一些低级错 ...

  8. 分析/proc/[pid]/maps中的各个内存区域的大小

    cat maps | sed -e "s/\([0-9a-f]\{8\}\)-\([0-9a-f]\{8\}\)/0x\1 0x\2/" | awk '{printf(" ...

  9. Javascript优点和缺点

    优点: 函数是顶级对象 基于原型继承的动态对象 对象字面量和数组字面量 缺点: 全局变量 作用域 自动插入分号 保留字 Unicode typeof parseInt + 浮点数 NaN

  10. MySQL-技术专区-mysql数据库权限管理

      登入root账户 mysql -u root -p 查看所有用户 select host,user from mysql.user; 查看某个用户的权限: show grants for user ...