拟模态窗体

在做项目的时候很多地方会需要用到模态窗体，以下代码用来实现拟模态窗体的效果，触发弹出模态窗体的事件，显示两个div一个为黑色背景，一个为内容，内容div居中，可以为存放内容的div设置CSS，使DIV的外观更佳美观，DIV中间可以放内容或者Ifarme。

.black_overlay { margin: 0,0,0,0; display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: Black; opacity: 0.6; filter: alpha(opacity=50); z-index: 1001; } .white_content { display: none; position: absolute; top: 30%; left: 40%; width: 400px; height: 280px; margin: 0,0,0,0; padding: 0px; border: 0px; background-color: white; z-index: 1002; } 

在js中控制DIV的显隐

function opendiv(lixing){ document.getElementById('light').style.display='block'; document.getElementById("modifyInfo").src="ModifyInfo.aspx?ID=10"; //if(lixing==0) document.getElementById('fade').style.display='block'; document.getElementById("modifyInfo").height = 260; } function colsediv(lixing){ document.getElementById('light').style.display='none'; //document.getElementById("test").style.display="none"; //if(lixing==0) document.getElementById('fade').style.display='none'; } 

HTML页面代码

<div id="light" class="white_content"> <table width="100%" cellpadding="0px" cellspacing="0px"> <tr style="height:10px"> <td style="background-color:#ADD8E6; text-align:right; padding-right:10px;" mce_style="background-color:#ADD8E6; text-align:right; padding-right:10px;"> <span style="cursor:hand; font-weight:bold" mce_style="cursor:hand; font-weight:bold" onClick="colsediv();">×</span> </td> </tr> <tr> <td> <iframe id="modifyInfo" name="modifyInfo" frameborder="0" src="" scrolling="no" style=" padding: 0,0,0,0; margin: 0,0,0,0; border: 0px; width:100%" title="修改信息"></iframe> </td> </tr> </table> </div> <div id="fade" class="black_overlay"> </div> 

该方法只是用一个背景DIV把原本网页盖住，然后在背景DIV上面放置个内容DIV，z-index属性必须设置清楚。