登录注册模块带遮罩层效果的实例

分享一个个人觉得比较不错的带遮罩层特效的登录注册模块：

首先是代码部分：

<div id="daohang">
    <div id="dl">
        <div style=" font-size:12px;color:#FFF; cursor:pointer; text-align:center; vertical-align:middle; line-height:30px;" id="alert1" onclick="ShowDiv('MyDiv','fade')" onmouseover="dian4()" onmouseout="li4()">登录</div>
        <div style=" font-size:12px;color:#FFF; cursor:pointer; text-align:center; vertical-align:middle; line-height:30px;" id="alert2" onclick="ShowDiv1('MyDiv1','fade1')" onmouseover="dian5()" onmouseout="li5()">注册</div>
    </div>
<!--弹出层时背景层DIV  登录的-->
<div id="fade" class="houceng">
</div>
<div id="MyDiv" class="white_content">
    <div style="text-align: right; cursor: default; height: 40px;">
        <span style="font-size: 14px; color:#FFF" onclick="CloseDiv('MyDiv','fade')">关闭</span>
    </div>

    <div style="color:#FFF; font-size:24px; text-align:center; vertical-align:middle; line-height:30px; margin-right:20px;">登录</div>
    <form id="biaodan"><br />
        <div style=" margin-left:70px; margin-top:15px; color:#FFF">账号：<input id="yhm" type="text" placeholder="请输入用户名" style=" border-radius:3px; border:2px solid white; background:transparent; 110px; color:#FFF"  onfocus="yhmfocus()" onblur="yhmblur()"/><div id="yhmbc">请输入用户名！</div></div>
        <div style=" margin-left:70px; margin-top:40px; color:#FFF">密码：<input id="mm" type="password" placeholder="请输入密码" style=" border-radius:3px; border:2px solid white; background:transparent; 110px; color:#FFF"  onfocus="mmfocus()" onblur="mmblur()" /><div id="mmbc">请输入密码！</div></div>
        <input type="button" value="确定" style="background:transparent; 50px; height:25px; color:#FFF; margin-left:95px; margin-top:55px" id="queding" />
        <input type="reset" value="重置" style="background:transparent; 50px; height:25px; color:#FFF; margin-left:20px;" />
    </form>
</div>

<!--弹出层时背景层DIV  注册的-->
<div id="fade1" class="houceng">
</div>
<div id="MyDiv1" class="white_content">
    <div style="text-align: right; cursor: default; height: 40px;">
        <span style="font-size: 14px; color:#FFF" onclick="CloseDiv('MyDiv1','fade1')">关闭</span>
    </div>

    <div style="color:#FFF; font-size:24px; text-align:center; vertical-align:middle; line-height:30px; margin-right:20px;">注册</div>
    <form id="biaodan"><br />
        <div style=" margin-left:70px; margin-top:15px; color:#FFF">账号：<input id="zcyhm" type="text" placeholder="请输入用户名" style=" border-radius:3px; border:2px solid white; background:transparent; 110px; color:#FFF"   onfocus="zcyhmfocus()" onblur="zcyhmblur()" /><div id="zcyhmbc">请输入用户名！</div></div>
        <div style=" margin-left:70px; margin-top:10px; color:#FFF">密码：<input id="zcmm" type="password" placeholder="请输入密码" style=" border-radius:3px; border:2px solid white; background:transparent; 110px; color:#FFF" onfocus="zcmmfocus()" onblur="zcmmblur()"  /><div id="zcmmbc">请输入密码！</div></div>
        <div style=" margin-left:42px; margin-top:10px; color:#FFF">确认密码：<input id="zcqrmm" type="password" placeholder="请输入密码" style=" border-radius:3px; border:2px solid white; background:transparent; 110px; color:#FFF" onfocus="zcqrmmfocus()" onblur="zcqrmmblur()"  /><div id="zcqrmmbc">两次密码不一致</div><div id="zcqrmmbcc">两次密码不一致</div></div>
        <div style=" margin-left:70px; margin-top:10px; color:#FFF">邮箱：<input id="zcyx" type="text" placeholder="请输入邮箱" style=" border-radius:3px; border:2px solid white; background:transparent; 110px; color:#FFF" onfocus="zcyxfocus()" onblur="zcyxblur()"  /><div id="zcyxbc">请输入邮箱！</div><div id="zcyxbcc">邮箱格式有误！</div></div>    
        <input type="button" value="确定" id="queding" onclick="qd()" style="background:transparent; 50px; height:25px; color:#FFF; margin-left:90px; margin-top:55px;"   />
        <input type="reset" value="重置" style="background:transparent; 50px; height:25px; color:#FFF; margin-left:20px;" />
    </form>
</div>

下面是CSS部分：

#daohang{ width:52px; height:504px; background-color:#000; position:fixed; float:left; top:95px; z-index:2001}
#dl{ width:52px; height:60px;}
#logohover{ position:absolute; top:12px; left:8px; z-index:1003; transition:0.7s}
#logohover:hover{ cursor:pointer}

#biaodan{ width:340px; height:280px; font-size:14px;}
#yhm{ width:100px;}

#yhmbc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:170px; }
#mmbc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:170px; }

#zcyhmbc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:170px; }
#zcmmbc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:170px; }
#zcqrmmbc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:198px; }
#zcqrmmbcc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:198px; }
#zcyxbc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:170px; }
#zcyxbcc{color:#FFF; float:left; display:none; margin-top:-23px; margin-left:170px; }

以下是JS部分：

function dian4()
{
     document.getElementById("alert1").style.backgroundColor="gray";
     document.getElementById("alert1").style.transition="0.7s";
}

function li4()
{
     document.getElementById("alert1").style.backgroundColor="black";
     document.getElementById("alert1").style.transition="0.7s";
}

function dian5()
{
     document.getElementById("alert2").style.backgroundColor="gray";
     document.getElementById("alert2").style.transition="0.7s";
}

function li5()
{
     document.getElementById("alert2").style.backgroundColor="black";
     document.getElementById("alert2").style.transition="0.7s";
}


<!--遮罩层事件登录的-->
//弹出隐藏层
function ShowDiv(show_div,bg_div){
document.getElementById(show_div).style.display='block';
document.getElementById(bg_div).style.display='block' ;
var bgdiv = document.getElementById(bg_div);
bgdiv.style.width = document.body.scrollWidth;
 bgdiv.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
document.getElementById(show_div).style.display='none';
document.getElementById(bg_div).style.display='none';
};

<!--登录注册事件-->
function yhmfocus()
{
    var a=document.getElementById("yhmbc");
    a.style.display="none";
}
function yhmblur()
{
    var a=document.getElementById("yhm").value;
    var b=document.getElementById("yhmbc");
    if(a=="")
    {
        b.style.display="block";
    }
}

function mmfocus()
{
    var a=document.getElementById("mmbc");
    a.style.display="none";
}
function mmblur()
{
    var a=document.getElementById("mm").value;
    var b=document.getElementById("mmbc");
    if(a=="")
    {
        b.style.display="block";
    }
}

function queding()
{
    var a=document.getElementById("yhm").value;
    var b=document.getElementById("mm").value;
    var c=document.getElementById("queding")
    if(a!=""&&b!="")
    {
        c.removeAttribute("disabled")
    }
}

function zcyhmfocus()
{
    var a=document.getElementById("zcyhmbc");
    a.style.display="none";
}
function zcyhmblur()
{
    var a=document.getElementById("zcyhm").value;
    var b=document.getElementById("zcyhmbc");
    if(a=="")
    {
        b.style.display="block";
    }
}

function zcmmfocus()
{
    var a=document.getElementById("zcmmbc");
    a.style.display="none";
}
function zcmmblur()
{
    var a=document.getElementById("zcmm").value;
    var b=document.getElementById("zcmmbc");
    if(a=="")
    {
        b.style.display="block";
    }
}

function zcqrmmfocus()
{
    var a=document.getElementById("zcqrmmbc");
    a.style.display="none";
}
function zcqrmmblur()
{
    var a=document.getElementById("zcqrmm").value;
    var b=document.getElementById("zcqrmmbc");
    var c=document.getElementById("zcmm").value;
    if(a!=c||c!=a)
    {
        b.style.display="block";
    }
}

function zcyxfocus()
{
    var a=document.getElementById("zcyxbc");
    a.style.display="none";
}
function zcyxblur()
{
    var a=document.getElementById("zcyx").value;
    var b=document.getElementById("zcyxbc");
    var c=document.getElementById("zcyxbcc");
    if(a=="")
    {
        b.style.display="block";
        c.style.display="none";
    }
    else if(a!="/^(w)+(.w+)*@(w)+((.w+)+)$/;")
    {
        c.style.display="block";
    }
    else
    {
        b.style.display="none";
        c.style.display="block";
    }
    
}

function qd()
{
    var a=document.getElementById("zcyhm").value;
    var b=document.getElementById("zcmm").value;
    var c=document.getElementById("zcqrmm").value;
    var d=document.getElementById("zcyx").value;
    var e=document.getElementById("queding");
    if(a==""&&b==""&&c==""&&d=="")
    {
        alert("请输入完整信息");
    }
}


<!--遮罩层事件注册的-->
//弹出隐藏层
function ShowDiv1(show_div1,bg_div1){
document.getElementById(show_div1).style.display='block';
document.getElementById(bg_div1).style.display='block' ;
var bgdiv = document.getElementById(bg_div1);
bgdiv1.style.width = document.body.scrollWidth;
 bgdiv1.style.height = $(document).height();
$("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv1(show_div1,bg_div1)
{
document.getElementById(show_div1).style.display='none';
document.getElementById(bg_div1).style.display='none';
};

下面是效果：