模拟模态对话框的DIV

最近项目中用到一个模拟模态对话框的DIV的实现，有两个层，下面的层是半透明的，将遮盖整个窗口，上面的层则用于用户输入信息，这里是一个简单的模仿。

以下是页面代码：

<html>
<head>
<title>Demo</title>

</head>
<body>
<table>
<tr>
 <td colspan="3"><input type="button" value="新增" name="" onclick="selectClass();"/></td>
</tr>
</table>
<div id="div1" style="display:none; background-color:#000; filter:alpha(opacity=30);opacity:0.3; width:1024px; height:768px; z-index:10; position: absolute;left:0px; top:0px;">
	</div>
	<div id="div2" style="display:none; background-color:#FFF; width:300px; height:180px;  z-index:20; position: absolute; left:300px; top:150px;">
		<table>
			<tr>
				<td>交易类型</td>
				<td>
					<select name="sel1" value="">
						<option value="">--选择交易类型--</option>
						<option>存款</option>
						<option>查询</option>	
						<option>汇款</option>	
						<option>取款</option>	
					</select>
				</td>
			</tr>
			<tr>
				<td>分类/对象</td>
				<td>
					<select name="sel2" value="" onchange="showSel3(this.value);">
						<option value"">--选择分类--</option>
						<option value="0">对手</option>
						<option value="1">对象</option>	
					</select>
				</td>
			</tr>
			<tr>
				<td id="td1">&nbsp;</td>
				<td id="td2">&nbsp;</td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" value="确定" name="confirm" onclick="confirm(true);">&nbsp;&nbsp;<input type="button" value="取消" name="cancel" onclick="confirm(false);"></td>
			</tr>
		</table>
	</div>
</body>
</html>

以下是javaScript代码：

<script>
//显示层
	function selectClass(){
		document.getElementById("div1").style.display="block";
		document.getElementById("div2").style.display="block";
	}

//显示对手名称/对象分类
	function showSel3(val){
		var strArr =strList();
		var td1HTML=document.getElementById("td1");
		var td2HTML=document.getElementById("td2");
		var td1Value="";
		var td2Value="";
		if(val!=""){
			if(val=="0"){
				td1Value="对手名称："
				td2Value="<input name='' type='text' value=''/>"
				td1HTML.innerHTML=td1Value;
				td2HTML.innerHTML=td2Value;
			}else{
				td1Value="对手分类："
				td2Value="<select name=''><option value=''>--请先把对手分类--</option>";
				for(var str in strArr){
					td2Value+="<option value='"+str+"'>"+strArr[str]+"</option>";
				}
				td2Value+="</select>";
				td1HTML.innerHTML=td1Value;
				td2HTML.innerHTML=td2Value;
			}

		}else{
			td1HTML.innerHTML="";
			td2HTML.innerHTML="";
		}
	}








	     //确定或消信息的输入

        function confirm(flag){
		if(flag){
		document.getElementById("div1").style.display="none";
		document.getElementById("div2").style.display="none";
		//传递数据
		}else{
		document.getElementById("div1").style.display="none";
		document.getElementById("div2").style.display="none";
		//清空数据
		document.getElementById("sel1").value="";
		document.getElementById("sel2").value="";
		document.getElementById("td1").innerHTML="";
		document.getElementById("td2").innerHTML="";
		}
	}



</script>

运行效果如下：

模拟模态对话框的DIV