本文共 1395 字,大约阅读时间需要 4 分钟。
目前bootstrap的版本是3.x,在当前版本中对于bootstrap modal(模态框)没有提供垂直居中的属性。
如果想让modal再垂直方向居中,目前需要自己处理。
方案1. 在modal显示成功后,重置margin-top的位置
加载成功事件监听:
$('#myModal').on('shown.bs.modal', function () { var $this = $(this); var dialog = $this.find('.modal-dialog'); //此种方式,在使用动画第一次显示时有问题 //解决方案,去掉动画fade样式 var top = ($(window).height() - dialog.height()) / 2; dialog.css({ marginTop:top });});
方案2.修改源代码,在源码中,提前设置margin-top的位置(推荐)
注:这种方式在使用动画fade时显示正常。
修改源代码,在设置dialog位置的地方
Modal.prototype.adjustDialog = function () { var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight this.$element.css({ paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '', paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : '' }) // 是弹出框居中。。。 var $modal_dialog = $(this.$element[0]).find('.modal-dialog'); var m_top = ( $(window).height() - $modal_dialog.height() )/2; $modal_dialog.css({'margin': m_top + 'px auto'}); }更多:
转载地址:http://kxogi.baihongyu.com/