解决 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. 【Vue】---Vue.config常用配置项

    一.前言 Vue-cli3 搭建的项目 相比较Vue-cli2界面相对较为简洁,之前的build和config文件夹不见了,那么应该如何配置 如webpack等的配呢? 二.基本配置 只需要在项目的根 ...

  2. mysql 5.7.20 从frm文件中得到建表语句 (使用 mysql-utilities)

    系统环境  centos 7.2    mysql社区版 5.7.20 mysql-utilities 根据官网的说法,截止到2018年5月30日,实用工具的一些功能在Shell的路线图中,鼓励用户迁 ...

  3. tdom中selectNodes的使用

    tdom中selectNodes的使用 */--> pre.src {background-color: #002b36; color: #839496;} pre.src {backgroun ...

  4. win10 虚拟机VMware 14中CentOS7文件共享

    一,环境 主机:win10 家庭版 软件:VMware 14 系统:CentOS 7 二,设置共享文件 右键虚拟机->选择设置 如图:创建共享文件 三,安装VMware Tools 然后进入ce ...

  5. JS提示信息来检测相应id的标签

    2015-07~2015-08 (其中$为document.getElementById()) 使用span提示信息来检测相应id的标签,没有返回值 infoTips("LRYH" ...

  6. LeetCode Array Easy 122. Best Time to Buy and Sell Stock II

    Description Say you have an array for which the ith element is the price of a given stock on day i. ...

  7. shell script 二 判断符号【】 shift 偏移量 if then fi

    判断符号[]类似于test.但是[]有通配符及正则表达式,为了区分,利用[]来做判断时,前后都需要加空格来区分.又一个坑 [ -z "$HOME" ];echo $? 例: 1 r ...

  8. 【JS学习】慕课网7-23编程练习 有关字符串数组

    要求:1.显示打印的日期. 格式为类似“2014年03月21日 星期三” 的当前的时间.2.计算出该班级的平均分(保留整数).同学成绩数据如下:"小明:87; 小花:81; 小红:97; 小 ...

  9. Linux服务器查看PHP是否支持mail()函数方法

    PHP的Mail函数可以用来发送邮件,如查看Linux服务器PHP是否支持Mail函数? PHP查看是否支持Mail函数的方法 Linux系统下的服务器,查看PHP是否支持Mail函数的方法有很多种: ...

  10. vs code 自定义代码片段

    1.快捷键Ctrl+Shift+P打开命令输入 snippet : (也可以点击文件=>首选项=>用户代码片段) 2.选择代码语言类型(这里以JavaScrpt为例) 3.在javascr ...