这个弹出层的登录界面挺好看，很清爽所以转了过来给大家分享，要实现这个功能很简单：首先设计一个登录界面，使用css中的display="none"将层隐藏。然后制作一个按钮点击后激活这个div层，就是onclick动作时display="";要做的好看关键是美工了。
界面图：
点击上图的登录按钮就会显示和隐藏登录框。
演示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>兼容IE,FF的弹出层登陆界面 - 中国asp之家</title> <style type="text/css"> * { margin:0; padding:0; font-size:12px; font-weight:normal; font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体"; font-style:normal; list-style-type:none; text-decoration:none; } div#body input#fnbtn { width:78px; height:39px; border:none; cursor:pointer; position:absolute; top:40px; left:100px; background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -70px no-repeat; } div#mask { position:absolute; top:0; left:0; background:#fff; filter:alpha(opacity=20); -moz-opacity:0.2; z-index:100; } div#login { position:absolute; top:75px; left:100px; width:293px; z-index:200; } div#login h2 { height:26px; padding-top:3px; padding-left:25px; background:transparent url('/article/UploadPic/20081/4/200814122558235.png') -84px -70px no-repeat; } div#login h2 input { height:18px; width:18px; float:right; border:none; cursor:pointer; margin:2px 6px 0 0; background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -169px no-repeat; } div#login h2 a { display:block; float:left; width:83px; height:26px; line-height:26px; text-align:center; text-decoration:none; color:#666; } div#login h2 a.cur { color:#f00; background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -187px no-repeat; } div#login ul { padding:14px 0 18px 12px; background:transparent url('/article/UploadPic/20081/4/200814122558235.png') -84px bottom no-repeat; } div#login ul li { padding-left:60px; margin-top:10px; display:inline-block; } div#login ul li { display:block; } div#login ul li:after { content:"youdian"; clear:both; display:block; height:0; visibility:hidden; } div#login ul li tt { float:left; width:60px; margin-left:-70px; text-align:right; line-height:22px; color:#444; } div#login ul li div input.cell, div#login ul li div input.cell2 { height:16px; padding:2px; line-height:16px; width:179px; border:1px #dcdcdc solid; color:#666; } div#login ul li div input.cell2 { width:50px; } div#login ul li div label { color:#666; cursor:pointer; } div#login ul li div img { margin-bottom:-7px; margin-left:8px; } * html div#login ul li div img { margin-bottom:-4px; } *+html div#login ul li div img { margin-bottom:-4px; } div#login ul li div input#fnlogin { width:59px; height:21px; cursor:pointer; border:none; margin-right:15px; background:transparent url('/article/UploadPic/20081/4/200814122558235.png') 0 -148px no-repeat; } div#login ul li p { padding-top:4px; color:#f00; } </style> </head> <body> <div id="body"> <input id="fnbtn" type="button" title="" /> </div> <div id="mask" style="display:none;"></div> <div id="login" style="display:none;"> <h2> <input id="fnquit" type="button" title="退出登录" /> <a href="#" class="cur" name="Email">Email登录</a><a href="#" name="用户名">用户名登录</a> </h2> <ul> <form id="LoginForm" name="LoginForm" action="http://www.aspxhome.com" method="post" enctype="multipart/form-data" > <li> <input id="loginType" name="loginType" type="hidden"/> <tt><label id="logtype" for="email">Email:</label></tt> <div><input id="username" name="username" type="text" class="cell" onKeyPress="return checkSubmit(event)"/></div> </li> <li> <tt><label for="password">密 码:</label></tt> <div><input id="password" name="password" type="password" class="cell" onKeyPress="return checkSubmit(event)" /></div> </li> <li> <tt></tt> <div><input id="reme" name="rememberme" type="checkbox" /> <label for="reme">下次自动登录</label> </div> </li> <li> <tt></tt> <div><input id="fnlogin" type="button"/><a href="#" onclick="return checkForgetPassword()">忘记密码?</a></div> </li> </form> </ul> </div> <script type="text/javascript"> function g(obj) { return document.getElementById(obj); } var login = { title:null, show:function(){ var sWidth,sHeight; sWidth = screen.width; sWidth = document.body.offsetWidth; sHeight=document.body.offsetHeight; if (sHeight<screen.height){sHeight=screen.height;} g("mask").style.width = sWidth + "px"; g("mask").style.height = sHeight + "px"; g("mask").style.display = "block"; g("login").style.display = "block"; g("login").style.right = g("body").offsetLeft + "px"; // window.status = g("body").offsetLeft; }, hide:function(){ g("mask").style.display = "none"; g("login").style.display = "none"; } } g("fnbtn").onclick = function(){ login.show(); this.blur(); this.style.backgroundPosition = "0 -109px"; }; g("fnlogin").onclick = function() { // The following 5 lines of code is used to get the login type & pass to the form // One More line of code is insert to root_index.jsp to capture the hidden value if (document.getElementById("logtype").innerHTML == "Email:") { document.getElementById('loginType').value = 'email'; } else { document.getElementById('loginType').value = 'mobile'; } document.LoginForm.submit(); }; g("fnquit").onclick = function(){login.hide();g("fnbtn").style.backgroundPosition = "0 -70px";}; var aa = g("login").getElementsByTagName("a"); var aTab = new Array(); for(var i=0; i<aa.length; i++){ if(aa[i].parentNode.nodeName == "H2"){ aTab.push(aa[i]); } } for(var j=0; j<aTab.length; j++){ aTab[j].onclick = function(){ this.blur(); if (this.className != "cur"){ for(var k=0; k<aTab.length; k++){aTab[k].className = ""}; this.className = "cur" g("logtype").innerHTML = this.name + ":"; } } } </script> <script language="javascript"> login.hide(); </script> </body> </html> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...