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实现CheckBox全选全不选
Jun 27 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 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调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
2016/06/12 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
vue实现侧边栏导航效果
2019/10/21 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python实现udp数据报传输的方法
2014/09/26 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
讲解Python中的递归函数
2015/04/27 Python
python检测是文件还是目录的方法
2015/07/03 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
关于Python中异常(Exception)的汇总
2017/01/18 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
Python函数的迭代器与生成器的示例代码
2020/06/18 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
Nike瑞典官方网站:Nike.com (SE)
2018/11/26 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
银行求职信个人范文
2013/12/16 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
具结保证书范本
2015/05/11 职场文书
何玥事迹观后感
2015/06/16 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers