Sky-Ice

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

但发现另一种解决办法,可以实现,代码如下:

  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());

在窗口变化的时候

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

效果如下

也可以自己稍微调整下上下高度

 

分类:

技术点:

相关文章: