bootstrap Modal 模态框垂直居中

时间 2019-11-18

标签 bootstrap modal 模态垂直居中栏目 Bootstarp 繁體版

原文原文链接

解决 Modal 垂直居中的问题，上网找了好多博客，有好多说改源码的，这个并无实践。css

但发现另外一种解决办法，能够实现，代码以下：app

  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);
                console.log(top)
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top-20);
            });
        }

在 Modal show的时候，回调这个函数函数

 $('#tipModal').modal('show',centerModals());

在窗口变化的时候this

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

效果以下spa

也能够本身稍微调整下上下高度code