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

前端之家收集整理的这篇文章主要介绍了bootstrap 模态框(modal)实现水平垂直居中显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

怎么让其在

垂直方向也居中

呢?

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

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

代码,如没将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相关文章