BootStrap模态框不垂直居中的解决方法
更新时间：2017年10月19日 10:16:17 作者：夏尔_
这篇文章主要为大家详细介绍了BootStrap模态框不垂直居中的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了BootStrap模态框不垂直居中的解决方法，供大家参考，具体内容如下
解决问题：BootStrap自带的模态框不垂直居中
解决方案：调用BootStrap为我们提供的方法$('.modal').on('show.bs.modal', function(){});
在模态框显示之前我们用JS修改他的Top值，
具体代码如下：
/**
* 垂直居中模态框
**/
function centerModals() {
$('.modal').each(function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 50 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top - 50);
});
}
// 在模态框出现的时候调用垂直居中方法
$('.modal').on('show.bs.modal', centerModals);
// 在窗口大小改变的时候调用垂直居中方法
$(window).on('resize', centerModals);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Javascript中判断对象是否为空,本文利用Javascript 中的对象就是一个字典的特性,检查对象中有没有键值对实现判断对象是否为空,需要的朋友可以参考下2015-06-06
做输入校验的时候如果你前端框架用的是bootstrap的话，首推bootstrapValidator校验方式，下面通过本文给大家分享下校验流程，一起看看吧2016-12-12
这篇文章主要介绍了JavaScript的AOP编程,以实例形式分析了javascript面向切面编程的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
下面小编就为大家带来一篇js实现字符全排列算法的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
重写javascript中window.confirm的行为
javascript中window.confirm这个方法很好用，可以弹出一个确认对话框.但有一个问题是，它默认的情况下，将选中那个"确定"按钮，当用户有意无意的在键盘回车，就是说按下Enter键的时候，就会自动返回true。在很多时候其实我们不希望这样2012-10-10
这篇文章主要为大家介绍了Blob对象实现文件上传下载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
本文将提供两种方式保存图片，大家可以根据喜欢自由选择2012-11-11
自定义tabBar可以让开发者更加灵活地设置tabBar样式,以满足更多个性化的场景,下面这篇文章主要给大家介绍了关于小程序如何实现中间带加号tabbar的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了浅谈FastClick 填坑及源码解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了JS关键字球状旋转效果的实例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
最新评论