鼠标判断定时出现登录框的前端功能

这里加入了cookie是为了避免刷新页面导致的登录框不能正常显示，这个JS需要引用jquery.cookie和jQ文件以及sjcl加密文件，代码引用如下：

        @{var userTimeout = System.Configuration.ConfigurationManager.AppSettings["UserTimeout"].ToString();}

        $(document).ready(function () {
            loginOperation.userTimeOut = '@userTimeout';
            var curUrl = location.href.replace(location.search, '')
            if (curUrl.indexOf('Login') < 0) {
                loginOperation.eventInit('@Url.Content("~/Base/LoginRequest")');
            }
        })

前端通过后台的配置文件获取时差根据时差判断多久出现一次登录框，这里的全局变量要写到ready里面如果写到外面会造成IE8不能识别

JS：

var loginOperation = {
    loginInit: false,
    userTimeOut:0,
    lastOperationTime: new Date(),
    eventInit: function (url) {
        //初始化事件
        if (!loginOperation.loginInit) {
            $(document).bind("mousemove", { callBackFunUrl: url }, loginOperation.isParent);
            loginOperation.loginInit = true;
        } 
    },
    isParent: function (url) {
        //判断是否为iframe调用,如果他有父级并且父级有操作的方法就使用子级调用父级模式，否则就直接使用方法，为避免多级iframe嵌套出现的调用不到方法，可使用top调用方法
        if (top && top.loginOperation) {
            top.loginOperation.checkLogin(url);
        } else {
            loginOperation.checkLogin(url);
        }
    },
    checkLogin: function checkLogin(url) {
        var nowTime = new Date();//当前时间
        //当前时间和上一次鼠标操作的时间进行对比
        var timeOut = (nowTime.getTime() - loginOperation.lastOperationTime.getTime()) / 1000;
        //如果大于XX分钟或者登录标记为未登录说明过期了需要登录，与页面首次加载的情况不冲突
        if (timeOut >= loginOperation.userTimeOut || $.cookie("isLogin") == "false") {
            //解除鼠标移动事件，显示登录窗体避免鼠标移动事件重复执行导致界面混乱
            $(document).unbind("mousemove");
            var login_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>';
            if ($(window.parent.document.body).find(".login-mask").length<=0) {
                $(window.parent.document.body).remove(".login-mask");
                $(window.parent.document.body).append(login_html);
            }

            $('#txtUserNmae').keydown(function () {
                if (event.keyCode == 13) {
                    $('#txtUserPwd').focus();
                } else if (event.keyCode == 9) {
                    $('#txtUserPwd').focus();
                    return false;
                }
            });
            $("#txtUserPwd").keydown(function () {
                if (event.keyCode == 13) {
                    loginOperation.login(url.data.callBackFunUrl);
                } else if (event.keyCode == 9) {
                    $('#btnReLogin').focus();
                    return false;
                }
            });
            //绑定登录窗口按钮事件
            $('#btnReLogin').bind("click", { url: url.data.callBackFunUrl }, loginOperation.login);

            //并且将登陆标记设为未登录
            $.cookie("isLogin","false",{path:'/'});
        };
        //记录最后鼠标操作时间
        loginOperation.lastOperationTime = new Date();
    },
    login: function (event) {
        var eventUrl = typeof (event) == "object" ? event.data.url : 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("");
        }

        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(eventUrl + "?_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(".login-mask").length > 0) {
                        $('.login-mask').remove();
                        $('.children').remove();
                    }
                    //登陆后再次记录一下最后鼠标操作时间
                    loginOperation.lastOperationTime = new Date();
                    //重新绑定鼠标移动事件然后检测过期时间
                    $(document).bind("mousemove", { callBackFunUrl: eventUrl }, loginOperation.checkLogin);
                    //设置为登录状态
                    $.cookie("isLogin", "true", { path: '/' });      
                } else {
                    $("#btnReLogin").text("确 定").css("color", "White");
                    $("#txtUserNmae ~ label").html(ret.ResultDesc);
                }
            }, function (error) {
                $("#btnReLogin").text("确 定").css("color", "White");
                $("#txtUserNmae ~ label").html("登录异常!");
            });
        } else {
            $("#btnReLogin").text("确 定").css("color", "White");
        }
    }
};

这里登录框和覆盖层两个DIV要同一个级别，不要<div><div></div></div>这样写，因为IE8不支持rgba这样的透明度设置，只能用filter去写滤镜效果达到透明，如果不同级会导致父级DIV被设置成透明后它内部的所有DIV都会变成透明效果

CSS：

/*操作界面登录框*/
.children {
    border: 2px #fff solid;
    width: 450px;
    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 20px;
    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 20px;
    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 72px;
    font-family: 微软雅黑,arial, verdana, helvetica, sans-serif;
    background: #3ac941;
    font-size: 18px;
    color: white;
}

如果不考虑IE8的话就可以使用rgba写代码了，如果是IE8的话使用filter属性制作透明遮罩，谷歌的话使用opacity，其他浏览器请自行百度