bootstarp modal框居中显示的实现代码


Posted in Javascript onFebruary 18, 2017

bootstrap.js的大概1154行:

this.$element.css({
   paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',
   paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
})

后加:

// 是弹出框居中
  var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
  var m_top = ( $(window).height() - $modal_dialog.height() )/2;
  $modal_dialog.css({'margin': m_top + 'px auto'});
 }

P.S. 需要的东西每次都要查一遍太麻烦了。以后注意整理。

bootstarp modal框居中显示的实现代码

以上所述是小编给大家介绍的bootstarp modal框居中显示的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
jQuery学习笔记之基础中的基础
Jan 19 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 #Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 #Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 #Javascript
JS设置时间无效问题的解决办法
Feb 18 #Javascript
js的OOP继承实现(必看篇)
Feb 18 #Javascript
jQuery仿IOS弹出框插件
Feb 18 #Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 #Javascript
You might like
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
js中获取时间new Date()的全面介绍
2016/06/20 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
详解ES6数组方法find()、findIndex()的总结
2020/05/12 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[08:54]DOTA2-DPC中国联赛 正赛 Aster vs LBZS 选手采访
2021/03/11 DOTA
Python算法应用实战之队列详解
2017/02/04 Python
基于python的字节编译详解
2017/09/20 Python
Python装饰器用法示例小结
2018/02/11 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
Python多分支if语句的使用
2020/09/03 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
网络工程师专家职业发展路线
2014/02/14 职场文书
进步之星获奖感言
2014/02/22 职场文书
写景作文评语集锦
2014/12/25 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
道歉情书大全
2015/05/12 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Redis入门基础常用操作命令整理
2022/06/01 Redis