zoukankan      html  css  js  c++  java
  • bootstrap Modal 模态框垂直居中

    解决 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);

    效果如下

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

  • 相关阅读:
    Mysql其他
    Linux大全
    Django-你想知道的都在这里
    k8s
    极速安装k8s 快速融入学习
    flask orm
    Elasticsearch
    1爬虫
    MY git 操作
    docker 骚操作
  • 原文地址:https://www.cnblogs.com/Sky-Ice/p/9578889.html
Copyright © 2011-2022 走看看