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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
js left,right,mid函数
Jun 10 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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垃圾回收机制引用计数器概念分析
2013/06/24 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
php 访问oracle 存储过程实例详解
2017/01/08 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
浅谈js的异步执行
2016/10/18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python re.sub()替换正则的匹配内容方法
2019/07/22 Python
python数据归一化及三种方法详解
2019/08/06 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
keras输出预测值和真实值方式
2020/06/27 Python
Python 列表反转显示的四种方法
2020/11/16 Python
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
模范教师事迹材料
2014/02/10 职场文书
向领导表决心的话
2014/03/11 职场文书
承诺函范文
2015/01/21 职场文书
个人工作表现自我评价
2015/03/06 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang