在云那方

首页 新随笔 联系 订阅 管理
.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";
}
posted on 2008-07-04 10:56  Rich.T  阅读(494)  评论(0)  编辑  收藏  举报