遮罩层登录功能

JSP文件

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/resources/utils/taglibs.jsp" %>
<!--遮罩层-->
    <div id="cover" class="login_cover" style="display: none;">
        <!--显示层-->
        <div class="login_cover_close_title">
            登录
            <a id="close" href="javascript:void(0)"><img src="${path }/images/close_03.jpg" /></a>
        </div>
        <div class="login_cover_logindiv">
            <form action="${path }/auth_do/enter" method="post">
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td></td>
                      <td><b id="error" style="color:red; margin-left:50px;">${error }</b></td>
                  </tr>
                  <tr>
                    <td class="login_cover_td">用户名：</td>
                    <td colspan="2">
                      <input type="text" name="loginname" value="${user.loginname }" class="login_cover_input1" /></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td class="login_cover_td">密码：</td>
                    <td colspan="2">
                      <input type="hidden" value="${keyWord }" name="keyWord">
                      <input type="password" name="loginpassword" value="${user.loginpassword }" class="login_cover_input1" /></td>
                    <td>
                        <!-- <a href="#">忘记密码？&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> -->
                        <span onclick="javascript:alert('若忘记密码，请您联系客服：400-600-9460');" style="color:#3BA0F5; cursor:pointer;">忘记密码？</span>
                    </td>
                  </tr>
                  <tr>
                    <td class="login_cover_td">验证码：</td>
                    <td>
                      <input type="text" name="textfield" value="${code }" class="login_cover_input2" onblur="validation(this)"/></td>
                    <td><img id="image" src="${path}/random_do/codeImage" title="点击更换" width="90" height="30" class="login_yzm" onclick="change(this)"/></td>
                    <td><a href="javascript:void(0)" onclick="change(this)">换一个&nbsp;&nbsp;&nbsp;&nbsp;</a><span id="code" style="color:red;"></span></td>
                  </tr>
                  <tr>
                    <td>&nbsp;</td>
                    <td colspan="2">
                        <input type="submit" class="login_cover_btn" value="登 录" onclick="return loginCheck()"/>
                        <input type="button" class="login_cover_btn" value="注册" onclick="location.href='${path }/auth_do/toregister'"/>
                    </td>
                    <td>&nbsp;</td>
                  </tr>
                </table>
            </form>
        </div>
    </div>

 JS文件

 

var propath = document.getElementById("getpath").value;
var searchpage = $("#pagestate").val();
if($("#loginuser").val() == null || $("#loginuser").val() == ""){
    var _CalF = {   //便捷方法
            $ : function(id){return document.getElementById(id)},
            create : function(id){return document.createElement(id)},
            append : function(id){return document.body.appendChild(id)},
            remove : function(id){return document.body.removeChild(id)}
        }
        function popup(openID,conID,closeID){
            this.onclick(openID,conID,closeID);
        }
        popup.prototype = {
            cssStyle : "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;",
            createShadowDiv : function(){   //背景遮罩
                var shadowDiv = _CalF.create("div");
                shadowDiv.id = "shadowDiv";
                shadowDiv.style.cssText = this.cssStyle;
                shadowDiv.style.height = document.body.scrollHeight + "px";
                shadowDiv.style.backgroundColor = "#000"
                shadowDiv.style.zindex = 100;
                _CalF.append(shadowDiv);
            },
            createIframe : function(){  //iframe
                var iframe = _CalF.create("iframe");
                iframe.id = "shadowIframe";
                iframe.style.cssText = this.cssStyle;
                iframe.style.height = document.body.scrollHeight + "px";
                iframe.style.zindex = 99;
                _CalF.append(iframe);
            },
            removeDiv : function(){
                _CalF.remove(_CalF.$("shadowDiv"));
                _CalF.remove(_CalF.$("shadowIframe"));
            },
            onclick : function(openID,conID,closeID){
                var that = this;
                _CalF.$(openID).onclick = function(){
                    if(window.ActiveXObject){   //ie6
                        if(!window.XMLHttpRequest){
                            document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;";
                        }
                    }
                    that.createIframe();
                    that.createShadowDiv();
                    _CalF.$(conID).style.display = "block";
                }
                document.getElementById(closeID).onclick = function(){
                    _CalF.$(conID).style.display = "none";
                    that.removeDiv();
                }
            }
        }
        
        for(var i=1; i<=10; i++){
            new popup("bt"+i,"cover","close");
        }
        if(searchpage == "searchpage"){
            for(var i=1; i<=10; i++){
                new popup("b1t"+i,"cover","close");
            }
        }
}
var flag = true;//提交表单标记
function validation(even){
    var text = $(even).val();
    $.ajax({
          type: "POST",
          url: propath+"/random_do/getcode",
          dataType: "text",
          success: function(data){
              if(text.toLowerCase() != data.toLowerCase()){
                  $("#code").html("验证码错误");
                  flag = false;
              }else{
                  $("#code").html("");
                  flag = true;
              }
          },
          error: function(){
              alert("系统错误")
          }
    });
}

function loginCheck() {
    var temp = true;
    var mes = "";//提示信息
    var name = $("[name=loginname]").val().trim();
    var pwd = $("[name=loginpassword]").val().trim();
    var code = $("[name=textfield]").val();
    if(name == ""){
        flag = false;
        temp = false;
        mes = mes+"用户名,"
    }
    if(pwd == ""){
        flag = false;
        temp = false;
        mes = mes+"密码,"
    }
    if(!code){
        flag = false;
        temp = false;
         $("#code").html("验证码错误");
    }
    if(!temp){
        mes = mes+"不能为空";
        $("#error").text(mes);
    }
    
    var codePrompt = $("#code").text();//验证码错误提示信息
    $.ajax({
        type: "POST",
        async: false,
        url: propath+"/auth_do/ajaxenter",
        data:{name: name, pwd: pwd},
        dataType: "text",
        success: function(data){
            if(data == "true"){
                $("#error").text("");
                if(codePrompt == ""){
                    flag = true;
                }
            }
            else if( data == "false"){
                flag = false;
                $("#error").text("用户名，密码错误");
            }
        },
        error: function(){
            alert("系统错误");
        }
    });
    
    
    return flag;
}

function change(obj){
    var timenow = new Date().getTime(); 
    $("#image").attr("src",propath+"/random_do/codeImage?page="+timenow);
}

 

在被嵌入的html中的标签中声明一个ID  id="bt${num.count }"

转载于:https://www.cnblogs.com/dieyf/p/4325813.html