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事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
May 24 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
jQuery实现的图片轮播效果完整示例
Sep 12 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
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 友好URL的实现(吐血推荐)
2008/10/04 PHP
php xml文件操作代码(一)
2009/03/20 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
[01:11:35]Liquid vs LGD 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
解决python对齐错误的方法
2020/07/16 Python
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
公司行政经理岗位职责
2013/12/24 职场文书
安全宣传标语口号
2014/06/06 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
党内外群众意见范文
2015/06/02 职场文书
十七岁的单车观后感
2015/06/12 职场文书
售房协议书范本
2015/08/11 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android