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

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

这个弹出层的登录界面挺好看，很清爽所以转了过来给大家分享，要实现这个功能很简单：首先设计一个登录界面，使用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

投稿

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

猜你喜欢

在ORACLE移动数据库文件

chr()函数参照表 chr13 chr10 chr34

ASP制作中使用MYSQL的分析

asp金额大小写转换完全无错版

如何自动备份Oracle数据库

使用IIS调试asp程序检查错误的方法

SQL Server 2005 Express版企业管理器下载

javascript 跨浏览器的事件系统

[翻译]标记语言和样式手册 chapter 5 表单

asp如何设定程序的执行次数？

解析：安装 MySQL时如何选择安装软件包

账户名和密码漏输或误输的文字提示

ASP处理多关键词查询实例代码

15个网页排版例子赏析

如何在SQL Server数据库中加密数据

ORACLE 常用函数总结(80个)第1/2页

TXT.WORD文档下载另存为,而不是在浏览器中打开

SQL 比较一个集合是否在另一个集合里存在的方法分享

getWindow与isWindow

合理利用页面标签元素有利用搜索引擎收录