.Net可拖动带验证码的置顶层登陆登陆框
1.前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>text</title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript">
//确定登陆
function btnLogin_onclick()
{
var login_LoginName = document.getElementById("<%=this.login_LoginName.ClientID %>");
var login_Password = document.getElementById("<%=this.login_Password.ClientID %>");
var login_VerifyCode =document.getElementById("login_VerifyCode");
var VerifyCode = document.getElementById("VerifyCode");
if (login_LoginName.value == "" || login_LoginName.value == "ID、邮箱、手机号码之任一") {
alert("请填写您的帐号！");
login_LoginName.value = ""
login_LoginName.focus();
return false;
}
if (login_Password.value == "") {
alert("请填写登录密码！");
login_Password.focus();
return false;
}
if (login_VerifyCode.value == "") {
alert("请填写确认码！");
login_VerifyCode.focus();
return false;
}
if (login_VerifyCode.value != VerifyCode.value) {
alert("确认码不正确！");
login_VerifyCode.focus();
return false;
}
return true;
}
</script>
</head>
<body onload="ValidateCode()">
<form id="Form1" method="post" runat="server">
<a onclick="javascript:ShowLoginDiv();">登陆</a>
<div id="win" style="display:none;">
<div id="Login" style="display:none;" onmousedown="startDrag(this)" onmouseup="stopDrag(this)" onmousemove="drag(this)">
<table id="myTable" cellpadding="0" cellspacing="0">
<tr class="title">
<td align="center">
<table width="90%">
<tr>
<td align="left">登陆窗口</td>
<td align="right"><img alt="" src="image/icn_closew.gif" title="close" onclick="HideLoginDiv()"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="center">
<table width="80%">
<tr>
<td>帐 号：</td>
<td align="left">
<input id="login_LoginName" type="text" size="15" onclick="this.focus();stopFlay();" onmouseover="stopFlay();" onmouseout="startFlay();" maxlength="20" runat="server"/>
</td>
</tr>
<tr>
<td>密 码：</td>
<td align="left"><input id="login_Password" type="password" size="10" onclick="this.focus();stopFlay();" onmouseover="stopFlay();" onmouseout="startFlay();" maxlength="20" runat="server"/>
<a href="/Member/PwdReGet.aspx" target="_top">忘记密码？</a>
</td>
</tr>
<tr>
<td>确认码：</td>
<td align="left"><input type="text" size="8" id="login_VerifyCode" onclick="this.focus();stopFlay();" onmouseover="stopFlay();" onmouseout="startFlay();" maxlength="10"/>
<input type="text" id="VerifyCode" size="2" readonly="readOnly"/>
</td>
</tr>
<tr>
<td colspan="2"><asp:Button ID="btnLogin" Text="确定" CssClass="btn" runat="server" OnClick="btnLogin_Click" OnClientClick="return btnLogin_onclick();"/></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
2.login.css
/* login样式 */
.login
{
height:23px;
width:778px;
margin:1px 0px 0px 0px;
background-color:#FFFFCC;
text-align:center;
}
#loginUser
{
width:349px;
padding:5px 0px 0px 0px;
float:left;
}
body
{
font-size: 9pt;
}
#lgoin
{
z-index:1000;
width:100%;background:#000;color:#fff;
}
#win
{
z-index:1000;
position:absolute;left:20%;top:20%;width:200px;border:1px solid #000;cursor:hand;
}
#myTable
{
width:280px;
}
/*登陆框标题*/
.title
{
background-color: #0099cc;
height: 35px;
font-weight: bold;
}
/*登陆框内容*/
.content
{
background-color:#f3f0e7;
}
input {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid}
.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); BORDER-LEFT: #7b9ebd 1px solid; CURSOR: hand; COLOR: black; PADDING-TOP: 2px; BORDER-BOTTOM: #7b9ebd 1px solid}
#VerifyCode
{
color: #ff0000;
background-color: #6699ff;
}
3.login.js
//层拖动相关=======================================================
var x0=0,y0=0,x1=0,y1=0;
var moveable=false;
var faly = true;
//开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture();
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
}
//拖动;
function drag(obj){
if(moveable && faly){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
}
//停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture();
moveable = false;
}
}
//停止拖动;
function stopFlay(){
faly = false;
}
//开始拖动;
function startFlay(){
faly = true;
}
//登陆框相关=========================================================
//验证码
function ValidateCode()
{
var VerifyCode = document.getElementById("VerifyCode");
var number = "" + Math.random()*2000000;
VerifyCode.value = number.substr(0,4);
}
//弹出登陆框
function ShowLoginDiv(obj)
{
ScreenConvert();
var Login = document.getElementById("Login");
var win = document.getElementById("win");
Login.style.display = "block";
win.style.display = "block";
}
//隐藏登陆框
function HideLoginDiv()
{
DialogHide();
var Login = document.getElementById("Login");
var win = document.getElementById("win");
Login.style.display = "none";
win.style.display = "none";
}
//层置顶===================================================================================================
function ScreenConvert(){ //整个页面区域加屏蔽层
var objScreen = document.getElementById("ScreenOver");
if(!objScreen)
var objScreen = document.createElement("div");
var oS = objScreen.style;
objScreen.id = "ScreenOver";
oS.display = "block";
oS.top = oS.left = oS.margin = oS.padding = "0px";
if (document.body.clientHeight) {
var wh = document.body.clientHeight + "px";
}else if (window.innerHeight){
var wh = window.innerHeight + "px";
}else{
var wh = "100%";
}
oS.width = "100%";
oS.height = wh;
oS.position = "absolute";
oS.zIndex = "3";
oS.background = "#cccccc";
oS.filter = "alpha(opacity=50)";
oS.opacity = 40/100;
oS.MozOpacity = 40/100;
document.body.appendChild(objScreen);
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "hidden";
}
function DialogHide(){ //关闭div置顶层的主调
ScreenClean();
var objDialog = document.getElementById("DialogMove");
if (objDialog)
objDialog.style.display = "none";
}
function ScreenClean(){ //清屏
var objScreen = document.getElementById("ScreenOver");
if (objScreen)
objScreen.style.display = "none";
var allselect = document.getElementsByTagName("select");
for (var i=0; i<allselect.length; i++)
allselect[i].style.visibility = "visible";
}