模拟模态对话框的DIV
最近项目中用到一个模拟模态对话框的DIV的实现，有两个层，下面的层是半透明的，将遮盖整个窗口，上面的层则用于用户输入信息，这里是一个简单的模仿。以下是页面代码：
<html><head><title>Demo</title></head><body><table><tr> <td colspan="3"><input type="button" value="新增" name="" /></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" >&nbsp;&nbsp;<input type="button" value="取消" name="cancel" ></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+"</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>
运行效果如下：
http://dl.iteye.com/upload/attachment/463683/b8018eba-bafb-3928-9a5b-e88c7904966a.jpg
页:
[1]