解决 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. java == 和equals()

    == == 是运算符 :可以使用在基本数据类型变量和引用数据类型变量当中 : 如果比较的是基本数据类型变量,比较两个变量保存的数据是否相等(不一定类型相同) 如果比较的是引用数据类型变量, 比较两个对 ...

  2. 【C++第一个Demo】---控制台RPG游戏4【角色系统】

    [角色基类] #ifndef _ROLE_H_ #define _ROLE_H_ #include<list> #include<vector> #include " ...

  3. 天天用Synchronized,底层原理是个啥?

    作者:liuxiaopeng https://www.cnblogs.com/paddix/p/5367116.html Synchronized 的基本使用 Synchronized 的作用主要有三 ...

  4. dubbo的一些特性理解一下

    还有 启动检查.负载均衡.多协议支持 等 待总结

  5. mongo聚合命令

    db.getCollection('chat').aggregate([ { "$match": { "last": 1, "type": ...

  6. 函数节流及手机端点击延迟200ms解决方法

    不论是H5开发还是微信小程序,手机端点击都会有300ms的延迟,在实际项目中,会到此频繁触发,如有接口会频繁的请求接口,除了会引起不必要的多次请求还会导致数据有问题.下面有二种方式来处理这个问题: 1 ...

  7. 【转载】RabbitMQ正确的安装方式(windows10)

    链接地址:https://www.cnblogs.com/saryli/p/9729591.html

  8. texinfo - 软件文档系统

    DESCRIPTION 描述 Texinfo 是一种文档系统,使用单一的源文件来产生在线文档以及可打印的输出.它主要用于书写软件使用手册. 要查看 Texinfo 语言和相关工具的全面描述,请查看 T ...

  9. 在AndroidStudio2.3.2下JNI开发的详细步骤(转)

    转自:http://blog.csdn.net/luhaoying1111/article/details/72468867 安装NDK 在工具栏点击File->Settings->App ...

  10. Java中如何获取到线程dump文件

    死循环.死锁.阻塞.页面打开慢等问题,打线程dump是最好的解决问题的途径.所谓线程dump也就是线程堆栈,获取到线程堆栈有两步: (1)获取到线程的pid,可以通过使用jps命令,在Linux环境下 ...