Bootstrap弹出框(modal)垂直居中的问题及解决方案详解


Posted in Javascript onJune 12, 2016

使用过bootstrap modal(模态框)组件的人都有一种困惑, 好好的一个弹出框怎么就无法垂直居中了呢?刚巧在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样。废话少说,切入正题,Bootstrap弹出框垂直居中的问题,因为我拿到的弹出框样式并非垂直居中,而是top 10%,但页面长了,就显得特别恶心。

解决方案如下所示:

1.在css里,找到

.modal.fade.in {
top: 10%;
}

这个样式,修改它就ok了,由于css中是全局的,同时也可在页面中定义到某个modal的(高度)位置,方法如下:

<style>
#myModal-help
{
top:300px;
}
</style>

#myModal-help这个为modal的id,这样设置就ok了。

2.在js中,

我用的是bootstrap-modal.js(如果用的是bootstrap.js或者是bootstrap.min.js,同样可以,但需要找到相应位置)。

在js中找到(红色是我添加的方法):

var left = ($(document.body).width() - that.$element.width()) / 2; 
var top = ($(document.body).height() - that.$element.height()) / 2;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop; //滚动条解决办法
var top = (window.screen.height / 4) + scrollY - 120; //滚动条解决办法
console.log(left); 
that.$element 
.addClass('in') 
.attr('aria-hidden', false) 
.css({ 
left: left, 
top: top, 
margin: "0 auto" 
});
that.enforceFocus()

找到后,将红色的添加进去,就ok了,这样一来就所有的弹出框都垂直居中了。

以上所述是小编给大家介绍的Bootstrap弹出框(modal)垂直居中的问题及解决方案详解的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
js修改原型的属性使用介绍
Jan 26 Javascript
javascript arguments使用示例
Dec 16 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
Angular2 自定义表单验证器的实现方法
Dec 14 Javascript
详解angular2 控制视图的封装模式
Dec 27 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
Jan 26 Javascript
Javascript简写条件语句(推荐)
Jun 12 #Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 #Javascript
JavaScript_ECMA5数组新特性详解
Jun 12 #Javascript
喜大普奔!jQuery发布 3.0 最终版
Jun 12 #Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 #Javascript
浅谈jquery点击label触发2次的问题
Jun 12 #Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
PHP has encountered an Access Violation 错误的解决方法
2010/01/17 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PDO::query讲解
2019/01/29 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
js基本算法:冒泡排序,二分查找的简单实例
2016/10/08 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
微信小程序实现单个或多个倒计时功能
2020/11/01 Javascript
Python中文字符串截取问题
2015/06/15 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python实现壁纸下载与轮换
2020/10/19 Python
描述RIP和OSPF区别以及特点
2015/01/17 面试题
服务标语大全
2014/06/18 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
多表查询、事务、DCL
2021/04/05 MySQL
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏