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 相关文章推荐
让低版本浏览器支持input的placeholder属性(js方法)
Apr 03 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
Vue组件之全局组件与局部组件的使用详解
Oct 09 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue-router结合vuex实现用户权限控制功能
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初学者头疼问题总结
2006/10/09 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
python执行外部程序的常用方法小结
2015/03/21 Python
编写简单的Python程序来判断文本的语种
2015/04/07 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python实现的读写json文件功能示例
2018/06/05 Python
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
MYSQL相比于其他数据库有哪些特点
2013/07/19 面试题
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
校园安全检查制度
2014/02/03 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
市场营销求职信范文
2014/02/21 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016公司新年问候语
2015/11/11 职场文书
高三语文教学反思
2016/02/16 职场文书