bootstrap 模态框(modal)实现水平垂直居中显示


Posted in Javascript onJanuary 23, 2017

        众所周知,bootstrap是一款非常实用的CSS框架(主要用于样式的快速搭建),由于其简洁,美观,快捷,响应式等特点备受大家喜欢,但是其本身也是存在很多bug,当应对与具体的业务逻辑的时候往往达不到细节要求,比如今天我要谈的bootstrap的模态框,其默认是显示距离顶端30px,左右居中。

       怎么让其在垂直方向也居中呢?

       大家可能想加一个CSS样式,让其距离顶部距离变长,实践是检验真理的唯一标准,当你去试过会发现很多问题,在不修改源码的前提下修改插件并没有自由配置的样式一直是前端人员头疼的事情,在此,我小做研究,提出了两个方法:
1:

$('#youModel').on('shown.bs.modal', function (e) css('display'{ 
   var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2; 
   $(this).find('.modal-dialog').css({ 
    'margin-top': modalHeight 
   }); 
  });

会出现问题,每次触发事件让模态框显示的时候,会闪动一下,影响体验,在此查阅资料在此基础上提出完善的方法2
2:

$('#youModel').on('shown.bs.modal', function (e) { 
      // 关键代码,如没将modal设置为 block,则$modala_dialog.height() 为零 
      $(this).css('display', 'block'); 
      var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2; 
      $(this).find('.modal-dialog').css({ 
        'margin-top': modalHeight 
      }); 
    });

这样就可以解决闪动问题并完美居中了。

bootstrap 模态框(modal)实现水平垂直居中显示

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
详解javascript中对数据格式化的思考
Jan 23 #Javascript
JavaScript 栈的详解及实例代码
Jan 22 #Javascript
jQuery DateTimePicker 日期和时间插件示例
Jan 22 #Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 #Javascript
JavaScript 事件对内存和性能的影响
Jan 22 #Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 #Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 #Javascript
You might like
PHP运行模式的深入理解
2013/06/03 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
javascript强制点击广告的方法
2015/02/06 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
2015/08/13 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
Javascript 调用 ActionScript 的简单方法
2016/09/22 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
学习使用bootstrap的modal和carousel
2016/12/09 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
React 实现拖拽功能的示例代码
2019/01/06 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
老生常谈python之鸭子类和多态
2017/06/13 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
解决Python3 控制台输出InsecureRequestWarning问题
2019/07/15 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
高中生自我评语大全
2014/01/19 职场文书
现金出纳岗位职责
2014/03/15 职场文书
实习协议书范本
2014/04/22 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
新入职员工工作总结
2015/10/15 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
2016年国庆节67周年活动总结
2016/04/01 职场文书
Go缓冲channel和非缓冲channel的区别说明
2021/04/25 Golang