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 对象定义方法 简单易学
Mar 22 Javascript
IE下写xml文件的两种方式(fso/saveAs)
Aug 05 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
详解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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
Jquery组件easyUi实现选项卡切换示例
2016/08/23 Javascript
清除输入框内的空格
2016/12/21 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
使用pdb模块调试Python程序实例
2015/06/02 Python
python追加元素到列表的方法
2015/07/28 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
基于python实现从尾到头打印链表
2019/11/02 Python
python中自带的三个装饰器的实现
2019/11/08 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
python中tab键是什么意思
2020/06/18 Python
Python 创建TCP服务器的方法
2020/07/28 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
关于.NET, HTML的五个问题
2012/08/29 面试题
感恩教育活动总结
2014/05/05 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
另类冲刺标语
2014/06/24 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
时尚女魔头观后感
2015/06/04 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python