bootstrap 模态框(modal)实现水平垂直居中显示
众所周知,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 }); });
这样就可以解决闪动问题并完美居中了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
验证控件与Button的OnClientClick事件详细解析
以下就是被我已知忽略的问题和解决方案,当我发觉这个问题的时候,冒出了一身冷汗,幸亏做了严格的服务器端验证,不然可就惨了2013-12-12JavaScript的removeChild()函数用法详解
removechild 函数可以删除父元素的指定子元素,通过本文给大家介绍javascript的removeChild()函数用法,对js removechild函数相关知识感兴趣的朋友一起学习吧2015-12-12
最新评论