模拟模态对话框的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"> </td>
<td id="td2"> </td>
</tr>
<tr>
<td colspan="2"><input type="button" value="确定" name="confirm" onclick="confirm(true);"> <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>
运行效果如下：