jQuery 炫登陆

效果：类似对话框

1.aspx

    <div class="divLoginShadow"></div>
    <div id="divLogin">
        <img src="../Images/images_Gateway/btnClose2.png" class="imgClose" alt="" id="imgClose_Login" title="关闭"/>
        <div class="divLoginAll">
            <div class="divLoginInfo">
                <span>用户名</span>
                <input type="text" class="txtLogin" id="txtLoginName" />
            </div>
            <div class="divLoginInfo">
                <span>密码</span>
                <input type="password" class="txtLogin" id="txtLoginPwd" />
            </div>
            <img src="../Images/images_Gateway/btnSearch.png" class="btnLogin" alt="登录" title="登录" />  
        </div>
        <div class="divLoginError"></div>
    </div> 

2.css

#btnLogin{  font-family:微软雅黑; font-size:18px; text-align:center;} 
        .divLoginShadow,#divLogin{ width:655px; height:170px; position:absolute; left:26.2%; top: 43%; display:none;} 
        .divLoginShadow{ z-index:2; background:#0099CC;}
        #divLogin{ z-index:3; background-color:transparent; }
        .divLoginAll{ width: auto; height:50px; margin:60px 0 0 55px; }
        .divLoginInfo{ width:225px; height:30px; border-bottom:1px solid #fff; float:left; margin:0 35px 0 0; color:#fff; font-family:微软雅黑; font-size:18px;}
        .txtLogin{ width:140px; height:20px; line-height:20px; font-size:18px; background-color:transparent; margin:0 0 -5px 0; border:0;}
        .btnLogin{ width:35px; height:35px; float:left; cursor:pointer;}
        .divLoginError{ margin:0 0 0 55px; background-color:transparent; height:20px; color:#fff; font-size:12px; width:400px; }

3.jQuery

        $(function () {
            initEvents();
        });

        var loginIndex = 0; //登陆状态，1表示已登录，0表示未登录

        var dialogIndex = 1; //窗口状态，1表示当前没有窗口打开，0表示当前有窗口打开

        function initEvents() { 
            //设定登录背景透明度
            $(".divLoginShadow").css({ 'opacity': '0.85' });
            //点击登陆的时候显示登陆对话框
            ShowLoginDialog();
            //点击登录按钮，用户登录
            Login(); 
            //关闭对话框
            CloseDialog(); 
        }

        //点击登陆的时候显示登陆对话框
        function ShowLoginDialog() {
            $("#btnLogin").on("click", function () {
                if (dialogIndex == 1) {
                    $(".divLoginShadow").css("display", "block");
                    $("#divLogin").css("display", "block");
                    $("#txtLoginName")[0].focus();
                }
                dialogIndex = 0;
            });
        }

        //用户登录
        function Login() {
            $(".btnLogin").click(function () { 
                UserLogin();
            });
            //点击enter，用户登陆
            $("#txtLoginPwd").keydown(function (e) {
                if (e.which == 13) { 
                    UserLogin();
                }
            });
        } 

        //用户登录方法实现
        function UserLogin() {
            var loginName = $("#txtLoginName").val();
            var loginPwd = $("#txtLoginPwd").val();

            if (loginName == "") {
                $(".divLoginError").html("请输入用户名！");
                return;
            }
            if (loginPwd == "") {
                $(".divLoginError").html("请输入密码！");
                return;
            }

            $.ajax({
                type: "Post",     //要用post方式     
                url: "../Ajax/WebServiceHandler.aspx/UserLogin",     //预警     
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: '{"strLoginName":"' + loginName + '","strLoginPwd":"' + loginPwd + '"}',
                success: function (res) {
                    if (res.d == "fail") {
                        $(".divLoginError").html("输入的信息有误，请重新输入！");
                    }
                    else {
                        $("#btnLogin").html("欢迎您：<br/>" + res.d);
                        $(".divLoginShadow").css("display", "none");
                        $("#divLogin").css("display", "none");
                        loginIndex = 1;
                        dialogIndex = 1;
                    }
                },
                error: function (err) {
                }
            }); 
        }

        //关闭对话框
        function CloseDialog() {
            $(".imgClose").click(function () {
                var closeId = $(this).attr("id");
                if (closeId == "imgClose_QuickQuery") {
                    $(".divQuickQueryShadow").css("display", "none");
                    $("#divQuickQuery").css("display", "none");
                }
                else {
                    if (closeId == "imgClose_Login") {
                        $(".divLoginShadow").css("display", "none");
                        $("#divLogin").css("display", "none");
                    }
                }
                dialogIndex = 1;
            });
        }