位置：首页>> 网络编程>> JavaScript>> 兼容IE,FF的弹出层登陆界面代码

兼容IE,FF的弹出层登陆界面代码

作者：yeguangyun　来源：蓝色理想　发布时间：2008-01-04 12:13:00　

标签：登录,隐藏,界面,ie

这个弹出层的登录界面挺好看，很清爽所以转了过来给大家分享，要实现这个功能很简单：首先设计一个登录界面，使用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('/file/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('/file/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('/file/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('/file/UploadPic/20081/4/200814122558235.png') 0 -187px no-repeat;}div#login ul {padding:14px 0 18px 12px;background:transparent url('/file/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('/file/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>

投稿

兼容IE,FF的弹出层登陆界面代码

猜你喜欢