分享一个个人觉得比较不错的带遮罩层特效的登录注册模块:
首先是代码部分:
<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'; };
下面是效果: