欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

Bootstrap模态框实现垂直居中——修改bootstrap的js

来源: 开发者 投稿于  被查看 40078 次 评论:137

Bootstrap模态框实现垂直居中——修改bootstrap的js


bootstrap的默认弹窗垂直方向是不居中的,试验了几种方案,如下这个方案比较成功

在bootstrap的js中

搜索关键词“ Modal.prototype.adjustDialog ” 找到相应代码段

修改成如下内容

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 = ( $(document).height() - $modal_dialog.height() )/2;
    $modal_dialog.css({‘margin‘: m_top + ‘px auto‘});
  }

用户评论