Div+Css实现屏蔽效果的登陆窗体
电脑软硬件应用网 45IT.COM 时间:2008-11-28 17:54 作者:转载未知
|
实现代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>無題のページ</title>
<link rel="stylesheet" href="StyleSheet.css" type ="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script language ="jscript" type ="text/javascript">
function ShowLogin()
{
var ele=document.getElementById("loginForm");
var block=document.getElementById("block");
ele.style.display="";
block.style.display="";
}
function Reset()
{
document.getElementById("loginForm").style.display="none";
document.getElementById("block").style.display="none";
}
// window.onload=Reset();
</script>
<div id="loginForm">
<table>
<tr>
<td>
</td>
<td>
<input type="hidden" value="Login" name="Login" />
</td>
</tr>
<tr>
<td>
用户名：
</td>
<td>
<input name="userName" />
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input id="password" name="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="登陆" />
</td>
<td>
<input type="reset" value="取消" onclick="Reset()" />
</td>
</tr>
</table>
</div>
<div id="block">
</div>
</form>
</body>
</html>
/*登陆Form*/
#loginForm
{
border:solid 1px #AED5FD;
position:absolute;
top:35%;
left:40%;
z-index:2000;
background-color:#EAF4FE;
}
/**//*屏蔽Div*/
#block
{
background-color:#CCCCCC;
position:absolute;
top:0px;
left:0px;
z-index:1000;
display:block;
width:100%;
height:210%;
/**//*设置屏蔽div的透明度*/
filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=true , style=0 , opacity=40);
}
|
------分隔线----------------------------
无法在这个位置找到： baidushare.htm
