<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="DOCX.Test" %>
<!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>
<style type="text/css">
body
{
margin: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<a href="javascript:void(0)" οnclick="showFloat()">登陆 </a>//登陆链接
<table style="width: 100%;">
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<!--加一个半透明层-->
<div id="doing" style="filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3;
background-color: #000; width: 100%; height: 100%; z-index: 1000; position: absolute;
left: 0; top: 0; display: none; overflow: hidden;">
</div>
<!--加一个登录层-->
<div id="divLogin" style="border: solid 10px #898989; background: #fff; padding: 20px;
width: 780px; z-index: 1001; position: absolute; display: none; top: 50%; left: 50%;
margin: -200px 0 0 -400px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="padding: 3px 15px 3px 15px; text-align: left; vertical-align: middle;">
<div>
用户:
<asp:TextBox ID="TxtUserName" runat="server"> </asp:TextBox>
</div>
<div>
密码:
<asp:TextBox ID="TxtUserPwd" runat="server" TextMode="Password"> </asp:TextBox>
</div>
<br />
<div>
<asp:Button ID="btnLogin" runat="server" Text=" 登 陆 " OnClick="btnLogin_Click" />
<input id="btnCancel" type="button" value=" 取 消 " οnclick="Close()" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
<script type="text/javascript" language="javascript">
function Close() //隐藏两个层
{
document.getElementById("doing").style.display = "none";
document.getElementById("divLogin").style.display = "none";
}
function $(id) {
return (document.getElementById) ? document.getElementById(id) : document.all[id];
}
function showFloat() //根据屏幕的大小显示两个层
{
document.getElementById("<%=TxtUserName.ClientID %>").value = document.getElementById("<%=TextBox1.ClientID %>").value;
var range = getRange();
$('doing').style.width = range.width + "px";
$('doing').style.height = range.height + "px";
$('doing').style.display = "block";
document.getElementById("divLogin").style.display = "";
}
function getRange() //得到屏幕的大小
{
var top = document.body.scrollTop;
var left = document.body.scrollLeft;
var height = document.body.clientHeight;
var width = document.body.clientWidth;
if (top == 0 && left == 0 && height == 0 && width == 0) {
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
}
return { top: top, left: left, height: height, width: width };
}
</script>
</html>