打印

推荐,兼容IE,FF很酷的弹出层登陆界面

yeguangyun [楼主]

疯狂的白菜

中级会员

帖子: 168
体力: 205
威望: 0
当前: 宁夏银川
离线: 56 天

1^# 大中小发表于 2007-11-1 10:59

抠出来的,贡献给大家:

<!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>登陆界面</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('http://www.youdian.com/images/index/default/logbg_v2.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('http://www.youdian.com/images/index/default/logbg_v2.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('http://www.youdian.com/images/index/default/logbg_v2.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('http://www.youdian.com/images/index/default/logbg_v2.png') 0 -187px no-repeat;
}
div#login ul {
	padding:14px 0 18px 12px;
	background:transparent url('http://www.youdian.com/images/index/default/logbg_v2.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('http://www.youdian.com/images/index/default/logbg_v2.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="/Login.do"  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>

提示：您可以先修改部分代码再运行

TOP

做西部数码代理.Cn1元国际45元 | 微软开发者工具互动网站

yeguangyun [楼主]

疯狂的白菜

中级会员

帖子: 168
体力: 205
威望: 0
当前: 宁夏银川
离线: 56 天

2^# 大中小发表于 2007-11-1 10:59

嘿嘿,自己先顶一个!!!

TOP

美橙vps独立IP月付189元 | 千千静听皮肤设计大赛

jiqinggu

中级会员

帖子: 170
体力: 369
威望: 0
离线: 6 天

3^# 大中小发表于 2007-11-1 11:07

修改为周围灰色，弹出来窗口可以移动就完美了

TOP

掌握加薪筹码 IT薪资宝典给您答案！ | 《疯狂的程序员》劲爆上市

yeguangyun [楼主]

疯狂的白菜

中级会员

帖子: 168
体力: 205
威望: 0
当前: 宁夏银川
离线: 56 天

4^# 大中小发表于 2007-11-1 11:10

如果只是单纯的登陆的话,我想周围灰色就不太合适了,可移动到是可以考虑,~~

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

dashzhao

赵勇

银牌会员

帖子: 2395
体力: 1691
威望: 2
当前: 广东深圳

专长 项目管理

5^# 大中小发表于 2007-11-1 11:54

我现在都有点讨厌拿个层覆盖整个页面的效果了！你这在载入还不让我动起来的东西郁闷！

恋爱高手

TOP

kisony

新手上路

帖子: 2
体力: 0
威望: 0
当前: 广东广州
离线: 31 天

6^# 大中小发表于 2007-11-1 12:50

不错的效果很漂亮

TOP

lovexctk

初级会员

帖子: 65
体力: 86
威望: 0
当前: 北京通州区

专长 前端制作,SEO

7^# 大中小发表于 2007-11-1 12:54

好效果,学习中```````

TOP

skybot

size

钻石会员

帖子: 2852
体力: 6673
威望: 6
当前: 上海长宁
离线: 1 天

专长 JS,C#,MSSQL

8^# 大中小发表于 2007-11-1 12:55

不错谢谢啊.幸苦了

http://www.qlili.com 个人站帮点啊

TOP

z3333426

探索

银牌会员

帖子: 5051
体力: 1496
威望: 0
当前: 上海闵行

专长 前端制作,.NET,UE

9^# 大中小发表于 2007-11-1 13:38

做一个隐藏的层。
然后onclick的时候 display:block.....

惟草木之零落兮，恐美人之迟暮。

TOP

fangcs

初级会员

帖子: 23
体力: 58
威望: 0
离线: 3 天

10^# 大中小发表于 2007-11-1 19:13

帅，楼主，我收下了，谢谢啊。

TOP

skyenya

新手上路

帖子: 2
体力: 4
威望: 0
当前: 北京丰台区
离线: 47 天

11^# 大中小发表于 2007-11-1 21:59

很好呀　以后可以用了

TOP

jackyli82

新手上路

帖子: 21
体力: 42
威望: 0
离线: 188 天

12^# 大中小发表于 2007-11-1 22:04

学习了很不错谢谢

TOP

hx7248292

鼎视视觉

中级会员

帖子: 248
体力: 363
威望: 1
当前: 福建厦门

专长 前端制作,JS,ASP

13^# 大中小发表于 2007-11-2 09:12

bug:

点出框来会出现滚动条！！！

鼎视视觉：www.xmarea.com

TOP

wjsl

初级会员

帖子: 81
体力: 135
威望: 0
离线: 18 天

14^# 大中小发表于 2007-11-2 09:24

你可以参考这个

http://bbs.blueidea.com/viewthread.php?tid=2804693&highlight=

TOP

kucz520

初级会员

帖子: 99
体力: 198
威望: 0
当前: 安徽安庆
离线: 3 天

专长 网页设计

15^# 大中小发表于 2007-11-2 09:56

确实有点小问题，可能是隐藏的滚动条的控制问题！

学习,学习!

TOP

yeguangyun [楼主]

疯狂的白菜

中级会员

帖子: 168
体力: 205
威望: 0
当前: 宁夏银川
离线: 56 天

16^# 大中小发表于 2007-11-2 17:53

有问题,没注意!!
我在看看!

TOP

doggic

初级会员

帖子: 69
体力: 143
威望: 0
当前: 广西桂林
离线: 49 天

17^# 大中小发表于 2007-12-13 14:05

有时有时也用得上的
做记号

TOP

junisvip

新手上路

帖子: 8
体力: 13
威望: 0
当前: 广东广州
离线: 10 天

18^# 大中小发表于 2008-3-26 13:58

挺漂亮的

TOP

booucn

天空遨游的鱼

中级会员

帖子: 380
体力: 412
威望: 2
当前: 上海徐汇
离线: 19 天

19^# 大中小发表于 2008-3-26 15:11

恩挺漂亮的

http://design-studio.cn/blog

TOP

cqx2004

新手上路

帖子: 7
体力: 14
威望: 0
离线: 140 天

20^# 大中小发表于 2008-3-26 16:12

用的着。。。

谢了

TOP

ihubo

草依山

中级会员

帖子: 162
体力: 285
威望: 0
当前: 天津河东

专长 JS,PHP,FMS

21^# 大中小发表于 2008-3-26 18:14

我用的是OPERA.怎么看不见呀..???

过好大学最后的时光！

TOP

ihubo

草依山

中级会员

帖子: 162
体力: 285
威望: 0
当前: 天津河东

专长 JS,PHP,FMS

22^# 大中小发表于 2008-3-26 18:15

可以看见了,不过要是再加一个可以拖动就好了~

过好大学最后的时光！

TOP

Firede

火德

初级会员

帖子: 83
体力: 138
威望: 0
当前: 北京朝阳区
离线: 2 天

专长 网页设计,前端制作,JS

23^# 大中小发表于 2008-3-26 18:30

不错，收藏了。

玛雅老班底：39454127

TOP

marsvip

初级会员

帖子: 50
体力: 72
威望: 0
当前: 四川成都
离线: 8 天

24^# 大中小发表于 2008-4-25 11:50

单击后确实有很多问题
比如浏览器有滚动条等。。。希望在点击周围空白的地方能关闭。增强用户体验。

www.willroad.cn

TOP

lemonzq

周全

版主

帖子: 276
体力: 150
威望: 3
当前: 北京东城区

专长 网页设计,UI,UE

25^# 大中小发表于 2008-4-25 11:58

楼主能否改成鼠标经过的效果？
经过后，再弹出一个框框

是否需要加一个onMouseover的属性？

www.ueui.com.cn
关注：用户体验 | 交互设计| 以用户为中心的设计

TOP

tigerzheng

中级会员

帖子: 65
体力: 219
威望: 0
离线: 5 天

26^# 大中小发表于 2008-11-7 11:43

很漂亮啊，学习了。

主页未完成

TOP