BootStrap模态框不垂直居中的解决方法


Posted in Javascript onOctober 19, 2017

本文实例为大家分享了BootStrap模态框不垂直居中的解决方法,供大家参考,具体内容如下

解决问题:BootStrap自带的模态框不垂直居中

解决方案:调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){});

在模态框显示之前我们用JS修改他的Top值,

具体代码如下:

/** 
 * 垂直居中模态框 
 **/ 
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()) / 2); 
    top = top > 50 ? top : 0; 
    $clone.remove(); 
    $(this).find('.modal-content').css("margin-top", top - 50); 
  }); 
} 
// 在模态框出现的时候调用垂直居中方法 
$('.modal').on('show.bs.modal', centerModals); 
// 在窗口大小改变的时候调用垂直居中方法 
$(window).on('resize', centerModals);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 前的按键判断代码
Mar 19 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
Apr 17 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
vue之延时刷新实例
Nov 14 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 #Javascript
JS实现点击循环切换显示内容的方法
Oct 19 #Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 #Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 #Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 #Javascript
微信小程序支付之c#后台实现方法
Oct 19 #Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 #Javascript
You might like
PHP的FTP学习(二)
2006/10/09 PHP
php 文件上传类代码
2011/08/06 PHP
PHP中time(),date(),mktime()区别介绍
2013/09/28 PHP
php判断表是否存在的方法
2015/06/18 PHP
php适配器模式简单应用示例
2019/10/23 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
jQuery判断指定id的对象是否存在的方法
2015/05/22 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
JavaScript实现显示函数调用堆栈的方法
2016/04/21 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
JPA的优势都有哪些
2013/07/04 面试题
银行员工辞职信范文
2014/01/20 职场文书
上海世博会口号
2014/06/19 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript