bootstrap模态框垂直居中效果

本文实例效果其实就是一个点击弹窗效果，供大家参考，具体内容如下

先上jquery代码

 //模态框垂直居中
 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);
     top = top > 0 ? top : 0;
     $clone.remove();
     $(this).find('.modal-content').css("margin-top",
       top - 50);
    });
 }
 $('.modal').on('show.bs.modal', centerModals);
 $(window).on('resize', centerModals);

html代码

 


  
  

   
   

    
    

     

      
       ×
      
      
用户登录
     

     

      


       账号
       

         (success) 
        

       
      


      

       密码
       

         (success) 

       
      
     
     

      

       

        现在登录
         »
       
      
     
    
   
  
 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。