bootstrap 模态框水平垂直居中显示

js中创建居中函数

// 模态框居中
    function centerModals() {
        $('#myModal').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 > 0 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top);
        });
    };

在模态框调用show方法时触发

$('#myModal').on('show.bs.modal', centerModals);

设置相关选项

//禁用空白处点击关闭
    $('#myModal').modal({
        backdrop: 'static',
        keyboard: false,//禁止键盘
        show:false
    });

根据页面大小实时调整

    $(window).on('resize', centerModals);