解决 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. HTML5: HTML5 Web Workers

    ylbtech-HTML5: HTML5 Web Workers 1.返回顶部 1. HTML5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能 ...

  2. 内核module读取进程页目录

    根据当前CR3寄存器内容,读取对应物理内存中的页目录页,并进行解析 1: void dumpPageDirectoryEntry(u32 entry) 2: { 3: u8 present; 4: u ...

  3. qs.parse()、qs.stringify()使用方法, 以及在axios 中怎么用?

    最近一直被纠结于传输格式,就在这里整理一下吧. qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.   (axios 自带qs , // import qs from ' ...

  4. scss定义全局变量引入sass-resources-loader报错

    开发jquery多页应用,引入sass-resources-loader后报 Make sure 'options.resources' is String or Array of Strings. ...

  5. Java 连接池的工作原理

    什么是连接? 连接,是我们的编程语言与数据库交互的一种方式.我们经常会听到这么一句话“数据库连接很昂贵“. 有人接受这种说法,却不知道它的真正含义.因此,下面我将解释它究竟是什么.[如果你已经知道了, ...

  6. 矩阵的 Frobenius 范数及其求偏导法则

    cr:http://blog.csdn.net/txwh0820/article/details/46392293 一.矩阵的迹求导法则   1. 复杂矩阵问题求导方法:可以从小到大,从scalar到 ...

  7. 【JDK1.8】Java 栈实现方式

    看到一道面试题,问Java中栈的实现方式,记录下一些实现细节. API中有5个方法,分别是: boolean empty() E peek() E pop() E push() int search( ...

  8. idea激活教程,最新!!!

    1.下载破解补丁(关键). 破解补丁:JetbrainsIdesCrack-4.2-release.jar百度云地址:https://pan.baidu.com/s/18ovphd7sm7oYXQb4 ...

  9. node-mysql连接数据库

    const mysql=require('mysql') const con=mysql.createConnection({ host:'localhost', user:'root', passw ...

  10. 【leetcode】939. Minimum Area Rectangle

    题目如下: Given a set of points in the xy-plane, determine the minimum area of a rectangle formed from t ...