本文共 2713 字，大约阅读时间需要 9 分钟。

模态框基于html 原生js 实现的模态框

这是js请求

模态框显示

   
		 
    
			 
     
				 
      
					 
       ×					 
       
图片展示
				 
      
				 
      
       				这是模态框显示视频  	 
       				这是模态框显示图片  		 
       				 
      
			 
     
		 
    
	 
   

这个是点击事件

{
   					field : 'avUrl', 					title : '视频的路径',					sortable: false,                    formatter: function(value, row, index) {
                           var actions = [];                        actions.push('查看视频 ');                        return actions.join('');                    }				},

这个是读取后台接口的字段显示

//给导入按钮添加导入模态框表单		function modelView1(data) {
   			console.log('点击了')			var id = data;			//弹出模态框			$("#importModal1").modal("show");			$.ajax({
   				url:"/rest/selectMailById",				data:{
   id:id},				type:"POST",				dataType:"json",				success:function (data) {
   					// console.log(document.querySelector("#legalDeputy"),document.querySelector("#legalDeputy").value)					document.querySelector("#legalDeputy").value=data.legalDeputy					document.querySelector("#legalId").value=data.legalId					document.querySelector("#bankCard").value=data.bankCard					// $("#legalDeputy").attr("src" , data.legalDeputy);					// $("#legalId").attr("src" , data.legalId);					// $("#bankCard").attr("src" , data.bankCard);					// console.log(data)					// console.log(data.bankCard)				}			});		}

效果图:

另一个博主的模态框

			
   								
   				
   		
模态弹出框
		点击我会弹出模态框				点击我这个链接也会弹出模态框				单击我会利用JS来弹出模态弹出框		
   
		
    			
    
				
     
					
      
						
       						
       							×							Close												
       
模态弹出窗标题
					
      
					
      
						
       
模态弹出窗主体内容
					
      
					
      
						
       关闭						
       保存					
      
				
     
			
    
		
   
				

   	         
   
		
    
			
     
				
      
					
       
						
        
         
         
          
         
 店铺名称： 
         
         
          
         
 营业执照法人代表： 
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
         
          
         
  搜索  重置 
 
        
					
       
				
      
			
     
			
     
				
      					 添加								
      					 修改								
      					 删除								
      						 导出				 			
     
			
     
				
      			
     
		
    
    
    
    	
   
    
   
	 
   
		 
    
			 
     
				 
      
					 
       ×					 
       
资质图展示
				 
      
				  
      
       店铺资质图 
      				 
      
       
       					 
       					 
       
					 
       
					 
       
					 
       
					 
       					 
       
					 
       
					 
       
					 
       
					 
       					 
       
					 
       
					 
       
					 
       
					 
       					 
       
					 
       
					 
       
					 
       
					 
       					 
       
					 
       
					 
       
					 
       
					 
       				 
      
			 
     
		 
    
	 
   
   	 
   
		 
    
			 
     
				 
      
					 
       ×					 
       
店主相关信息
				 
      
				 
      
       店主信息 
      				 
      
					 
       营业执照法人代表:
       
       
       
					 
       法人代表的身份证: 
       
       
       
					 
       法人代表银行卡号:
       
       
       
				 
      
			 
     
		 
    
	 
   
    

转载地址：http://whls.baihongyu.com/