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 相关文章推荐
javascript 定义初始化数组函数
Sep 07 Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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 checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP 实现base64编码文件上传出现问题详解
2020/09/01 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
jQuery知识点整理
2015/01/30 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
json跨域调用python的方法详解
2017/01/11 Python
用Python 执行cmd命令
2020/12/18 Python
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
销售心得体会
2014/01/02 职场文书
初三学习决心书
2014/03/11 职场文书
2015年团支书工作总结
2015/04/03 职场文书
汽车销售员工作总结
2015/08/12 职场文书
三下乡活动心得体会
2016/01/23 职场文书
解除合同协议书范本
2016/03/21 职场文书
创业计划书之寿司
2019/07/19 职场文书
PHP策略模式写法
2021/04/01 PHP
gojs实现蚂蚁线动画效果
2022/02/18 Javascript