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的Ajax时无响应数据的解决方法
May 25 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
jquery原理以及学习技巧介绍
Nov 11 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
微信小程序组件之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 empty函数报错解决办法
2014/03/06 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
详解使用vue实现tab 切换操作
2017/07/03 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue中的event bus非父子组件通信解析
2017/10/27 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python操作 hbase 数据的方法
2016/12/18 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python名片管理系统开发
2020/06/18 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
法学专业应届生求职信
2013/10/16 职场文书
大学生年度自我鉴定
2013/10/31 职场文书
会计助理岗位职责
2014/02/17 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
体育教师个人总结
2015/02/09 职场文书
详解Mysql和Oracle之间的误区
2021/05/18 MySQL
python中的None与NULL用法说明
2021/05/25 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android