JavaScript:
<script language="javascript">
var ti = null;
function show(){
var tmd = 0;
var x1 = document.body.clientWidth;
var y1 = document.body.scrollHeight;
with(div1){
style.width=x1+20;
style.height=y1;
style.overflowX="hidden";
style.overflowY="hidden";
style.visibility="visible";
}
div1.style.left=0;
div1.style.top=document.body.scrollTop;
div1.style.filter='Alpha(Opacity=0)';
// document.body.style.overflowX="hidden";
// document.body.style.overflowY="hidden";
// div2.style.top=parseInt(document.body.scrollTop)+((document.body.clientHeight-250)/2);
div2.style.visibility="visible";
ti = setInterval("hei()",10);
}
var x = 0;
function hei(){
x+=10;
if(x<50){
div1.style.filter='Alpha(Opacity='+x+')';
}
}
function close(){
div1.style.visibility="hidden";
div2.style.visibility="hidden";
//document.body.style.overflowX="visible";
//document.body.style.overflowY="visible";
clearInterval(ti);
x=0;
}
</script>
<style type="text/css">
<!--
.zhezhao {
width:1024px;
height:500%;
background:#000;-moz-opacity:0.2;
filter:alpha(opacity=20);
position:absolute;
}
CSS:
#div1 {
FILTER: alpha(opacity=70); VISIBILITY: hidden; POSITION: absolute; BACKGROUND-COLOR: #000
}
#div2 {
LEFT: expression((body.clientWidth-300)/2); VISIBILITY: hidden; WIDTH: 300px; POSITION: absolute; HEIGHT: 250px; BACKGROUND-COLOR: #cccccc; TEXT-ALIGN: center
}
-->
</style>
HTML:
<div id=div1 align=center></div>
<div id=div2 >
<table width="300" height="150" bgcolor="#C5D2ED" cellpadding="0" cellspacing="0">
<tr>
<td align="right" bgcolor="#0099CC" colspan="2">
<font color="#FFFFFF" size="2">
<a href="#"
style="text-decoration:none; color:#FFFFFF"
onClick="close()">关闭</a>
</font>
</td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交" /></td>
</tr>
</table>
</div>
<a href="#" onClick="show()">登陆</a>