Javascript和CSS模拟模态窗口

 CSS代码：

#containerDiv{}{
width:100%;
height:100%;
background-color:#E6E6E6;
filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=25,finishOpacity=25);
position:absolute;
top:0;
left:0;
z-index:49;
display:none;
}
#floatDiv{}{
top:200px;
position:absolute;
z-index:50;
width:100px;
display:none;
border:3px solid #E5E5E5; 
left:100px;
background-color:#e6e6e6;
}

Javascript代码：

 1 function show(){
 2 
 3 var container=document.getElementById("containerDiv")
 4 var floatDiv=document.getElementById("floatDiv");
 5 container.style.height=650+"px";
 6 container.style.width=window.screen.width+"px";
 7 container.style.display='block';
 8 floatDiv.style.display='block';
 9 }
10 function hide(){
11 
12 var container=document.getElementById("containerDiv")
13 var floatDiv=document.getElementById("floatDiv");
14 container.style.display='none';
15 floatDiv.style.display='none';
16 }

HTML标签：

<div id="floatDiv">
在这个DIV里可以放一些元素
<br/><input name="Button1" type="button" value="button" onclick="hide()"/>
</div>
<div id="containerDiv"> </div>
    
<form method="post">
    <input name="Button2" type="button" value="button" onclick="show()"/>
</form>