注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

家居装饰

让每一个人都拥有漂亮的舒服的家!

 
 
 

日志

 
 

用js实现弹出用户登陆框(背景变灰并且功能失效)  

2008-06-02 18:03:17|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用js实现弹出用户登陆框(背景变灰并且功能失效)

用javascript实现用户登陆,注册,忘记密码;修改密码等页面功能;

效果弹出用户登陆框而且背景变灰功能实效;好似关闭windows时的页面效果。

例题代码如下(在ie和firefox中均能用):

2个文件a.html和user.js

a.html文件内容如下:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script language="javascript" src="user.js"></script>

</head><body><div>

<input type="text" value="login"/><p>

<input type="button" onclick="popSignFlow(1);" value="login"/>   

<input type="button" onclick="popSignFlow(0);" value="change password"/></p>

</div></body></html>

user.js文件内容如下:

function G(id){

    return document.getElementById(id);

};

function GC(t){

   return document.createElement(t);

};

String.prototype.trim = function(){

          return this.replace(/(^\s*)|(\s*$)/g, '');

};

function isIE(){

      return (document.all && window.ActiveXObject && !window.opera) ? true : false;

}

     var loginDivWidth = 300;

var sign_in_flow = '<div style="background:#FF9900;">Login</div><div>e-mail:*</div><div>'

       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'

       + '</div><div>password:*</div><div><input type="password" id="sign_pwd" size="30"/>'

        + '</div><div><input type="button" value="login" onclick="signFlow(1);" id="sign_button"/>   '

        + '   <input type="button" value="cancel" onclick="cancelSign();"/></div>'

        + '<p><a href="javascript:loadSignUpFlow();">creat account</a>   '

        + 'or   <a href="javascript:loadForgetPwdFlow();">forget password</a></p>';

function loadSignInFlow(){

   G("sign_div").innerHTML = sign_in_flow;

    G("sign_email").focus();

};

var sign_up_flow = '<div style="background:#CCFF00;">Create New Account</div><div>e-mail:*</div><div>'

       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'

       + '</div><div>password:*</div><div><input type="password" id="sign_pwd" size="30"/>'

        + '</div><div>password again:*</div><div><input type="password" id="sign_repwd" size="30"/>'

        + '</div><div><input type="button" value="creat account" onclick="signFlow(0);" id="sign_button"/> '

        + ' <input type="button" value="cancel" onclick="cancelSign();"/></div>'

        + '<p><a href="javascript:loadSignInFlow();">login</a></p>';

function loadSignUpFlow(){

   G("sign_div").innerHTML = sign_up_flow;

    G("sign_email").focus();

};

function cancelSign(){

    G("sign_div").style.display = 'none';

    G("cover_div").style.display = 'none';

   document.body.style.overflow = '';

};

var forget_pwd_flow = '<div style="background:#FF99FF;">Forget Password</div><div>e-mail:*</div><div>'

       + '<input type="text" id="sign_email" maxlength="64" size="30"/>'

        + '</div><div><input type="button" value="sent pwd to e_mail" onclick="signFlow(2);" id="sign_button"/>   '

        + '   <input type="button" value="cancel" onclick="cancelSign();"/></div>';

function loadForgetPwdFlow(){

   G("sign_div").innerHTML = forget_pwd_flow;

    G("sign_email").focus();

};

function checkEmail(){

   if((G("sign_email").value.indexOf('@')<=0)||(G("sign_email").value.indexOf('.')<=0)){

    return '<div style="color:#FF0000";">Sorry, unrecognized e_mail.</div>';

   }

   return '';

}

function checkPwd(){

   if(G("sign_pwd").value.trim() == ''){

    return '<div style="color:#FF0000";">Password field is required.</div>';

   }

   return '';

}

function checkRePwd(){

   if(G("sign_pwd").value.trim() != G("sign_repwd").value.trim()){

    return '<div style="color:#FF0000";">The specified passwords do not match.</div>';

   }

   return '';

}

function signFlow(isSignIn){

    var error = checkEmail();

    var htmlText = null;

    if (isSignIn == 1) {

     if (error == ''){

      error = checkPwd();

     }

     htmlText = sign_in_flow;

    } else if (isSignIn == 0) {

     if (error == ''){

      error = checkPwd();

      if (error == ''){

       error = checkRePwd();

      }

     }

     htmlText = sign_up_flow;

    } else if (isSignIn == 2) {

    htmlText = forget_pwd_flow;

    }

    var eMailValue = G("sign_email").value.trim();

   if (error == '') {

    } else {

    G("sign_div").innerHTML = error + htmlText;

    G("sign_email").value = eMailValue;

    }

};

function popCoverDiv(){

   if (G("cover_div")) {

    G("cover_div").style.display = '';

   } else {

    var coverDiv = GC('div');

    document.body.appendChild(coverDiv);

    coverDiv.id = 'cover_div';

    with(coverDiv.style) {

     position = 'absolute';

     background = '#CCCCCC';

     left = '0px';

     top = '0px';

     var bodySize = getBodySize();

     width = bodySize[0] + 'px'

     height = bodySize[1] + 'px';

     zIndex = 98;

     if (isIE()) {

      filter = "Alpha(Opacity=60)";

     } else {

      opacity = 0.6;

     }

    }

   }

}

function getBodySize(){

   var bodySize = [];

   with(document.documentElement) {

    bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;

    bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;

   }

   return bodySize;

}

function popSign(isLogin){

   if (G("sign_div")) {

    G("sign_div").style.display = '';

   } else {

    var signDiv = GC('div');

    document.body.appendChild(signDiv);

    signDiv.id = 'sign_div';

    signDiv.align = "center";

    signDiv.onkeypress = function(evt){

          var e = window.event?window.event:evt;

          if (e.keyCode==13 || e.which==13) {

           if (G("sign_button")) {

            G("sign_div").focus();

            G("sign_button").click();

           }

          }

         };

    with (signDiv.style) {

     position = 'absolute';

     left = (document.documentElement.clientWidth - loginDivWidth)/2 + 'px';

     top = (document.documentElement.clientHeight - 300)/2 + 'px';

     width = loginDivWidth + 'px';

     zIndex = 99;

     background = '#FFFFFF';

     border = '#66CCFF solid 1px';

    }

   }

   if(isLogin) {

    G("sign_div").innerHTML = sign_in_flow;

   } else {

    G("sign_div").innerHTML = change_pwd_flow;

   }

  

}

function popSignFlow(isLogin) {

   popCoverDiv();  

   popSign(isLogin);  

   document.body.style.overflow = "hidden";

     

      if(isLogin) {

       G("sign_email").focus();

      } else {

       G("old_pwd").focus();

      }

}

function changePwd(){

    var error = checkOldPwd();

    if (error == ''){

     error = checkPwd();

    }

   if (error == ''){

    error = checkRePwd();

   }

    var oldPwd = G("old_pwd").value.trim();

    var newPwd = G("sign_pwd").value.trim();

   if (error == '') {

     var url = basePath + "?q=tripuser/tripuser_change_pwd_ajax/" + oldPwd + "/" + newPwd;

     exeRequest(url, getSignText, null);

    } else {

    G("sign_div").innerHTML = error + change_pwd_flow;

    }

};

function checkOldPwd(){

   if(G("old_pwd").value.trim() == ''){

    return '<div style="color:#FF0000";">Old Password field is required.</div>';

   }

   return '';

}

var change_pwd_flow = '<div style="background:#33FFFF;">Change Your Password</div><div>old password:*</div><div>'

       + '<input type="password" id="old_pwd" size="30"/>'

       + '</div><div>new password:*</div><div><input type="password" id="sign_pwd" size="30"/>'

        + '</div><div>new password again:*</div><div><input type="password" id="sign_repwd" size="30"/>'

        + '</div><div><input type="button" value="change password" onclick="changePwd();" id="sign_button"/> '

        + ' <input type="button" value="cancel" onclick="cancelSign();"/></div>';

  评论这张
 
阅读(1924)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017