HTML

    
        
     
            
      
                
                   
      
            
      
                
       
                    
        
立即预约
                    
        
填写您的资料，马上联系您~
                
       
                
       
                    
        
                        
         
 
           
         
                        
         
 
           
         
                        
         
 
          
           
         
                        
         
          *请输入您的手机号码
         
                    
        
                
       
                
       
                    
        
                        
                             
        
                
       
            
      
        
     
    
    

css

.modal-box{display: none; position: fixed; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 1000; background-color: rgba(0,0,0,.5);}.modal-box .modal-wrap,.modal-wrap{position: fixed; left: 50%; top: 50%; z-index: 210; width: 460px; margin-top: -300px; margin-left: -230px; background: #fff;}.modal-box .modal-container,.modal-container{position: relative; border: 0; padding-top: 35px; background: #fff; overflow: hidden; box-shadow: none;}.modal-box .modal-header,.modal-header{text-align: center; margin-bottom: 30px; padding: 0; border-bottom: none;}.modal-box .modal-header h3,.modal-header h3{margin-bottom: 15px; color: #2579ef; font-size: 24px;}.modal-box .close-btn,.close-btn{display: block; cursor: pointer; position: absolute; right: 15px; top: 15px; background: none; border: none; outline: none; z-index: 10001;}.modal-box input,.right-wrap input{padding: 0 20px; width: 100%; height: 40px; line-height: 40px; font-size: 16px;}.modal-box .form-group{margin-bottom: 10px;}.modal-box .tel,.modal-box .name{padding: 0 80px;}.modal-box .submit-btn,.error-tips,.submit-btn{position: relative; padding: 0 85px;}.modal-box .submit-btn .icon-arrow8,.error-tips .icon-arrow8,.submit-btn .icon-arrow8{position: absolute; left: 250px; top: 26px;}.modal-box .submit-btn input,.submit-btn .know,.submit-btn input,.right-wrap .submit-btn input{width: 100%; margin-top: 10px; padding: 0; height: 40px; line-height: 40px; font-size: 16px; color: #fff; text-align: center; background: #2579ef; opacity: 1; cursor: pointer;}.modal-box .submit-btn a i,.right-wrap .submit-btn a i{margin-left: 10px;}.modal-box .modal-footer{text-align: center; border-top: none;}.modal-footer{position: relative;}.modal-footer .telephone{margin: 10px 85px 30px; line-height: 30px;}.modal-footer .telephone label{float: left;}.modal-footer .telephone strong{float: left; font-size: 28px; color: #2579ef;}

JS部分

//弹窗所有操作function jModal(){    $(".j-popup-trigger").on("click", function(event){        event.preventDefault();        $(".j-modal-box").fadeIn("fast");    });    $(".j-modal-box").on("click", function(event){        if($(event.target).is(".j-close-modal") || $(event.target).is(".j-modal-box")){            event.preventDefault();            $(this).fadeOut("fast");        }    });    //键盘ESC关闭弹窗    $(document).keyup(function(event){        if(event.which == "27"){            $(".j-modal-box").fadeOut("fast");            $(".j-last-modal").fadeOut("fast");        }    });}