遮罩效果二

CSS：

/*操作界面登录框*/
.children {
    border: 2px #fff solid;
    width: 500px;
    height: 200px;
    background: #588cca;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    z-index: 999999;
    padding: 10px 10px 0px 20px;
    font-family: 微软雅黑,arial, verdana, helvetica, sans-serif;
    font-size: 18px;
    color: white;
    border-radius: 4px;
}

    .children label {
        font-size: 10px;
        color: #ff0000;
    }

.login-mask {
    background-color:#000;
    margin: auto;
    position: relative;
    z-index: 999996;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    color: white;
    opacity:0.5;
    filter:Alpha(Opacity=50); 
}


.lbName {
    list-style-type: none;
    margin: 30px 0px 0px 80px;
    padding: 0px;
    height: 43px;
}

    .lbName li {
        float: left;
        line-height: 40px;
        font-family: 微软雅黑,arial, verdana, helvetica, sans-serif;
        font-size: 18px;
    }

#txtUserNmae {
    width: 250px;
    height: 36px;
    font-size: 16px;
    border-radius: 4px;
    margin-left: 10px;
}

.lbPwd {
    list-style-type: none;
    margin: 10px 0px 0px 80px;
    padding: 0px;
    height: 43px;
}

    .lbPwd li {
        float: left;
        line-height: 40px;
        font-family: 微软雅黑,arial, verdana, helvetica, sans-serif;
        font-size: 18px;
    }

#txtUserPwd {
    width: 250px;
    height: 36px;
    font-size: 16px;
    border-radius: 4px;
    margin-left: 10px;
}

#btnReLogin {
    width: 253px;
    height: 42px;
    border-radius: 4px;
    margin: 10px 0px 0px 134px;
    font-family: 微软雅黑,arial, verdana, helvetica, sans-serif;
    background: #3ac941;
    font-size: 18px;
    color: white;
}

JS：

var loginOperation = {
    interval: '',
    intervalInit: function (url) {
        loginOperation.interval = setInterval('loginOperation.checkCookie("'+url+'")', 5000);//1000为1秒钟
    },
    //checkCookieInterval: interval,//1000为1秒钟
    checkCookie: function checkCookie(url) {
        if ($.cookie(".IMCISClientUserInfo") == null || $.cookie(".IMCISClient") == null) {
            //如果cookie为空，制作登录框重新登录保存登录信息并且暂时清除定时器
            clearInterval(loginOperation.interval);

            var login_html = '<div class="mask"><div class="children"><ul class="lbName"><li>用 户</li><li><input id="txtUserNmae" type="text" /><label></label></li></ul><ul class="lbPwd"><li>密 码</li><li><input id="txtUserPwd" type="text" /><label></label></li></ul><input id="btnReLogin" type="button" value="确定" /></div></div>';

            $('body').append(login_html);

            $('.mask').animate({
                width: '100%',
                height: '100%'
            }, 500);
            $('#btnReLogin').on("click", { url: url }, loginOperation.login);
        };
    },
    login: function (event) {
        var orgList = [];
        var userName = "";
        var userPwd = "";
        var flag = true;
        if ($("#txtUserNmae").val() == "") {
            $("#txtUserNmae ~ label").html("&nbsp;用户不能为空");
            return false;
        }
        else {
            $("#txtUserNmae ~ label").html("");
        }

        if ($("#txtUserPwd").val() == "") {
            $("#txtUserPwd ~ label").html("&nbsp;密码不能为空");
            return false;
        }
        else {
            $("#txtUserPwd ~ label").html("");
        }

        $("#btnReLogin").text("登录中").css("color", "#FAFF73");

        if (flag) {
            userName = sjcl.codec.base64.fromBits(sjcl.codec.utf8String.toBits($.trim($('#txtUserNmae').val())));
            userPwd = sjcl.codec.base64.fromBits(sjcl.codec.utf8String.toBits($.trim($('#txtUserPwd').val())));

            imcis.ajax(event.data.url + "?_timeStamp=" + new Date().getTime(), {
                u: userName,
                p: userPwd
            }, true, function (ret) {
                if (ret && ret.OrganizationList) {
                    orgList = ret.OrganizationList;
                }
                else if (ret.ResultCode == 0) {
                    if ($('body').find(".mask").length > 0) {
                        //这里如果不移除而是隐藏的话就无法清除定时器的效果因为它会出现两个maskDIV每次执行都会多出一个
                        $('.mask').remove();
                    }
                    loginOperation.intervalInit(event.data.url);
                } else {
                    $("#btnReLogin").text("确 定").css("color", "White");
                    $("#txtUserNmae ~ label").html(ret.ResultDesc);
                }
            }, function (error) {
                $("#btnReLogin").text("确 定").css("color", "White");
                alert(error.msg);
                $("#txtUserNmae ~ label").html("登录异常!");
            }, function () {
            });
        } else {
            $("#btnReLogin").text("确 定").css("color", "White");
        }

    }
};
    

HTML：

<div class="login-mask"></div><div class="children"><ul class="lbName"><li>用 户</li><li><input id="txtUserNmae" type="text" /><label></label></li></ul><ul class="lbPwd"><li>密 码</li><li><input id="txtUserPwd" type="password" /><label></label></li></ul><input id="btnReLogin" type="button" value="确定" /></div>