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学习笔记之Helloworld
Dec 22 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
javascript loadScript异步加载脚本示例讲解
Nov 14 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
Mar 14 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
微信小程序实现人脸识别
May 25 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 Javascript
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
js切换div css注意的细节
2012/12/10 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
laytpl 精致巧妙的JavaScript模板引擎
2014/08/29 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
2018/09/14 Javascript
JavaScript获取某一天所在的星期
2019/09/05 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
pycharm远程调试openstack代码
2017/11/21 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python 变量的创建过程详解
2019/09/02 Python
python 申请内存空间,用于创建多维数组的实例
2019/12/02 Python
Django在Model保存前记录日志实例
2020/05/14 Python
python爬虫可以爬什么
2020/06/16 Python
python中selenium库的基本使用详解
2020/07/31 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
三方股份合作协议书
2014/10/13 职场文书
公司经营目标责任书
2015/01/29 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015年药店店长工作总结
2015/04/29 职场文书