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 相关文章推荐
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
微信小程序  生命周期详解
Oct 27 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
一文了解JavaScript用Element Traversal新属性遍历子元素
Nov 27 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实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript 三种创建对象的方法
2009/10/16 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
npm的lock机制解析
2019/06/20 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python实现图书借阅系统
2019/02/20 Python
python批量处理文件或文件夹
2020/07/28 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
车间主管岗位职责
2013/11/14 职场文书
校园环保建议书
2014/05/14 职场文书
对照检查剖析材料
2014/09/30 职场文书
股东出资证明书范例
2014/10/04 职场文书
教师批评与自我批评
2014/10/15 职场文书
储备店长岗位职责
2015/04/14 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python