zoukankan      html  css  js  c++  java
  • bootstrap模态框弹出水平垂直居中


    1. /* center modal */  
    2. function centerModals() {   
    3.     $('#myModal').each(function(i) {   
    4.         var $clone = $(this).clone().css('display', 'block').appendTo('body'); var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);   
    5.         top = top > 0 ? top : 0;   
    6.         $clone.remove();   
    7.         $(this).find('.modal-content').css("margin-top", top);   
    8.     });   
    9. }   
    10. $('#myModal').on('show.bs.modal', centerModals);   
    11. $(window).on('resize', centerModals);  

    其中,$(window).on('resize', centerModals); 代表用户改变浏览器时的事件,可以不用,但是改变浏览器,模态框不会跟着变化。

    以上的JS代码加到页面的最后即可

  • 相关阅读:
    @codeforces
    @总结
    @总结
    @codeforces
    @topcoder
    @codeforces
    @codeforces
    @codeforces
    @codeforces
    @codeforces
  • 原文地址:https://www.cnblogs.com/qdphr/p/5897292.html
Copyright © 2011-2022 走看看