在网站制作当中,有些地方需要用到网站登陆以快速登陆(弹出登陆窗口)形式登陆,增加网站用户体验度。如下图所示:
点击登陆按纽sign in既弹出登陆窗口快速登陆。
详细实现代码如下:
<div style="background-image:url(Public/images/index_z1.jpg);background-repeat:no-repeat;width:216px;height:300px; background-color:#85080C; padding-
bottom:10px;" class="logincon" id="divPopLogin" style="display:none;">
<div id="notlogin">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40"></td>
<td></td>
</tr>
<tr>
<td height="25" align="right" valign="bottom"><span class="orange">Email: </span></td>
<td width="140" align="left"><input type="text" size="18" name="txt_UserName2" id="txt_UserName2"/></td>
</tr>
<tr>
<td height="25" align="right"><span class="orange">Password:</span></td>
<td align="left"><input type="password" size="18" name="txt_Pwd2" id="txt_Pwd2" onkeydown="return checkenter(event,1,'Login2()');"/></td>
</tr>
<tr>
<td height="10" colspan="2" align="center">
<input type="button" name="button" id="button" value="Sign in" onclick="Login2();"/>
<input type="button" name="button" id="button1" value="Sign up" onclick="javascript:location.href='register.aspx'" />
</td>
</tr>
</table>
</div>
</div>
以上代码放置于页面任何位置,当中用到的css代码:
<style type="text/css">
.logincon {width:463px; position:absolute; left:360px; top:335px; z-index:100; border-width:0 1px 1px 1px; border-style:solid; border-color:#b9b9b9;
overflow:hidden;}
</style>
当中用到的javascript代码:
<script type="text/javascript">
function ShowLoginWindow()
{
document.getElementById("divPopLogin").style.display="";
document.getElementById("txt_UserName").focus();
//异步登录调用
}
function Login2()
{
var username = document.getElementById("txt_UserName2").value;
var pwd = document.getElementById("txt_Pwd2").value;
if(username == "")
{
alert("Account not empty!");
return;
}
if(pwd == "")
{
alert("Password not empty!");
return;
}
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("post", "Ajax/user.aspx", true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send("action=login&username=" + username + "&pwd=" + pwd);
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
var result = xmlHttp.responseText;
if(result != -1)
{
location.href="checkbuy.aspx";
}
else
{
alert("account or password error!");
}
}
}
}
}
</script>
网站登陆以快速登陆(弹出登陆窗口)形式登陆代码讲解完成,欢迎一起讨论25亿企业网站管理系统的优缺点。