解决 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. C++笔试题之宏定义相关

    1. #define CALC(X) X*X int i; i=CALC(+)/(+); cout<<i<<endl; 输出:31 宏定义在替换处展开为:i = 5+5*5+5 ...

  2. 研究一下phpspider

    官方文档 1.下载 官方github下载地址: https://github.com/owner888/phpspider 下载地址可能无法访问,这里提供一个网盘下载地址: 链接: https://p ...

  3. 2018 ICPC Asia Singapore Regional A. Largest Triangle (计算几何)

    题目链接:Kattis - largesttriangle Description Given \(N\) points on a \(2\)-dimensional space, determine ...

  4. centors7 和 win7 修改开机顺序

    打开/boot/grub2/grub.cfg,找到windows对应的项 我的是 Windows 7 (loader) (on /dev/sda1) 执行命令 grub2-set-default &q ...

  5. [JXOI2017]数列

    题目 一个不太一样的做法 当\(A_{i-1}=x\),称\(A_1\)到\(A_{i-2}\)中大于等于\(A_{i-1}\)的最小值\(R\)为上界,\(A_1\)到\(A_{i-2}\)中小于等 ...

  6. 从一个url地址到最终页面渲染完成,发生了什么?

    从一个url地址到最终页面渲染完成,发生了什么? 1.DNS 解析 : 将域名地址解析为IP地址 浏览器DNS缓存 系统DNS缓存 路由器DNS缓存 网络运营商DNS缓存 递归搜索: www.baid ...

  7. 最新版react16.9中按需加载antd和使用less

    使用create-react-app创建应用 yarn create react-app my-app cd my-app yarn start 引入 antd 这是 create-react-app ...

  8. maven管理多模块

    创建parent项目: 1.打开IDEA,注意这里不要勾选模板,用模板创建过maven项目的小伙伴都知道模板创建项目非常慢,所以这里不要选模板,需要的文件夹我们后面自己来创建就可以了.所以这个页面直接 ...

  9. rabbitmq AmqpClient 使用Topic 交换机投递与接收消息,C++代码示例

    // strUri = "amqp://guest:guest@192.168.30.11:8820/test" // strUri = "amqp://[帐户名]:[密 ...

  10. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...