javascript+div弹出框（拼接页面）

             要实现这样一种功能，当我点击图片，弹出所对应区域所获取的数据，大家看下图，是我们显示的结果：

  

      首先实现功能的时候，要获取点击图片所对应的信息，传到后台进行查询，这里我们用到的是dkcode作为参数

进行查询。

点击图片的单击事件：

<span style="font-size:18px;">			$("#re1").click(function(){
				getdkInfo('G0000', 1);
				getdkInfo('G0000', 1);
				
			});</span>

触发 getInfo事件

<span style="font-size:18px;">function getdkInfo(dkcode, type){	
	$("#container").empty();
	if(type==1){
		加载生产分区
		$.get("${path}/app/getscfq.json?gnfqcode="+dkcode,function(result){	
			$("#container").empty();
			for(var i =0;i<result.length;i++){
				var d=result[i];
				var txt="";
				 txt+=	"<li id=\"list"+i+"\" οnclick=\"javascript:addUpload('"+d.scfqcode+"', 2)\"> ";
				 txt+=     "<dl>";
				 txt+=     	"<dt class=\"left\"><img src=\"${path}/resource/app/x/images/nt01.jpg\"></dt>";  
				 txt+=       "<dd>";
				 txt+=         "<h2>"+d.scfqname+"</h2>";
				 txt+=       "</dd>";                           
				 txt+=      " </dl>";
		         txt+=    "</li>";
		         document.getElementById("container").insertAdjacentHTML("beforeEnd", txt);				
			}
			$("#niu").show();
		});	
	}else{
		//单元	
		$.get("${path}/app/getdyfq.json?scfqcode="+dkcode,function(result){
			for(var i =0;i<result.length;i++){
				var d=result[i];
				var txt="";
				txt+=	"<li id=\"list"+i+"\" οnclick=\"wst.javaFun('"+d.dycode+"')\"> ";
				 txt+=     "<dl>";
				 txt+=     	"<dt class=\"left\"><img src=\"${path}/resource/app/x/images/nt01.jpg\"></dt>";  
				 txt+=       "<dd>";
				 txt+=         "<h2>"+d.dyname+"</h2>";
				 txt+=       "</dd>";                           
				 txt+=      " </dl>";
		         txt+=    "</li>";
		         document.getElementById("container").insertAdjacentHTML("beforeEnd", txt);
					$("#niu").show();
			}
	});	
}	</span>

txt文本框为拼接弹出框所显示的div。

拼接的页面在存放在哪呢？

<span style="font-size:18px;">   <div class="dhtanch" id="niu" style=" display:none">
    <div class="tanchmain">
           <div class="close"><img src="${path}/resource/app/x/images/22_03.png"></div>
      <ul class="news ind" id ="container" style=" margin-top:1rem; margin-bottom:1rem">

      </ul>
     </div>
  </div></span>

界面弹出框效果就完成了，是不是很简单呢？