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 相关文章推荐
JS中style属性
Oct 11 Javascript
ie和firefox不兼容的解决方法集合
Apr 28 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
Vue分页组件实例代码
Apr 17 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
vuejs移动端实现div拖拽移动
Jul 25 Javascript
javascript操作元素的常见方法小结
Nov 13 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
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
php cli换行示例
2014/04/22 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
vue中用H5实现文件上传的方法实例代码
2017/05/27 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
浅谈js中的this问题
2017/08/31 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
详解Nodejs get获取远程服务器接口数据
2019/03/26 NodeJs
原生js实现分页效果
2020/09/23 Javascript
Python进程间通信之共享内存详解
2017/10/30 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
初三学生个人自我评定
2014/04/06 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
信访工作汇报材料
2014/10/27 职场文书
助学感谢信范文
2015/01/21 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
Python基础之tkinter图形化界面学习
2021/04/29 Python