bootstrap modal 弹窗垂直居中的修改方法

发布时间:2019-09-28作者:laosun阅读(796)

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 : ''
        })
      }

    修改成以下,增加了几行

    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'});
      }

    这么简单的修改方式,却没有居中的设置,只能说明国外和国内的审美还是有区别的。


    修改完成后,保存退出。 强刷浏览器试试效果吧!


1 +1

版权声明

 jquery  前端  源码  开源  javascript

 请文明留言

0 条评论