BootStrap模态框不垂直居中的解决方法
2017-10-19 10:16
645 查看
本文实例为大家分享了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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- bootstrap多个modal模态框同时设置垂直居中的方法
- bootstrap 模态框垂直居中实现方法
- bootstrap 模态框(modal)实现水平垂直居中显示的方法
- Bootstrap 模态框(modal)实现水平垂直居中显示
- bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法
- bootstrap模态框 垂直居中
- CSS垂直居中问题解决方法
- jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
- BootStrap模态框和select2合用时input无法获取焦点的解决方法
- IE7,IE8,IE9 字体不能垂直居中, line-height 不起作用的解决方法
- Div垂直居中及容器内图片垂直居中的CSS解决方法
- bootstrap 模态框(modal)实现水平垂直居中显示 含具体分析
- Bootstrap模态框(modal)垂直居中
- 垂直居中及容器内图片垂直居中的CSS解决方法
- Bootstrap模态框(modal)垂直居中
- Bootstrap模态框水平垂直居中与增加拖拽功能
- 解决div中元素垂直居中的五种方法
- bootstrap模态框(modal)使用remote方法加载数据,只能加载一次的解决办法
- bootstrap 3.3 模态框垂直居中问题
- Bootstrap 模态框多次显示后台提交多次BUG的解决方法