仿163邮箱的提示框-飞飞

仿163邮箱的提示框

左右自己研究出来的一个仿造163邮箱提示框的一个特效。
蛮不错的哈。
直接要了源码过来。
把提示框再改造一下就完美了。

<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<title>仿163邮箱效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<meta name="robots" content="all" />
<meta name="author" content="爱左看右" />
<meta name="copyright"	content="www.msleft.com" />	
<meta name="keywords" content="重构,web标准,msleft,www.msleft.com,爱左看右" />
<meta name="description" content="重构,web标准,msleft,www.msleft.com,爱左看右" />	
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
/*  
update:  爱左看右  2007-06-13 
http://www.msleft.com/review/alpha.html
*/

body {
	text-align: center;
	color: #000;
	margin: 0 auto;
	padding: 0;
	font: 12px Verdana,Tahoma,sans-serif,Arial,宋体;
	line-height: 1.6em;
	background: #69a11c;
	letter-spacing: 1.4px;
	}
* { margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6,p { display: block; text-align: left; }
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
img { border: 0; }
a { text-decoration: none; color: #000; }
a:hover { color: #c00; text-decoration: none;  }

#wrap { 
	text-align: center;
	margin: 0 auto ;
	padding: 50px 0 ;
	width: 300px; 
	background: #ccc;
	}
#showBox {
	text-align: center;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
	width: 100%;
	height: 100%;
	}
#msleft {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1002;
	width: 100%;
	height: 100%;	
	}
#alphaBox {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;	
	background: #000;
	filter:alpha(opacity=60);   /* IE */ 
	opacity: 0.6;   /* 支持CSS3的浏览器（FF 1.5也支持）*/
	-moz-opacity: 0.6;  /* Moz + FF */ 
	}
#content {
	color: #416f02;
	margin: 0 auto;
	margin-top: 150px;
	width: 400px;
	height: 200px;
	padding-left: 50px;
	border: 10px solid #ff7e02; 
	background-color: #fff;
	}
#content h2 { font-size: 22px; color: #c00; padding: 10px 0; text-align: center; }
#content a { color: #416f02; }
#content a:hover { color: #c00; }

.intro{ color: #c27006; }
.close { text-align: right; height: 20px; margin: 20px 20px 0 0; }
</style>
<script type="text/javascript">
<!--
function boxAlpha() {
	var showBox=document.getElementById("showBox");
	var bgalpaha = document.getElementById("alphaBox");
	var content = document.getElementById("content");
	if(showBox.style.display == "none") {
		showBox.style.display = "block";
		showBox.style.height = document.documentElement.scrollHeight;
		bgalpaha.style.height= document.documentElement.scrollHeight+"px";
		if (navigator.appName == "Microsoft Internet Explorer") 
				bgalpaha.style.width = document.documentElement.scrollWidth  + "px";
		else 
			bgalpaha.style.width = document.documentElement.scrollWidth  + "px";
	//	alert(document.documentElement.scrollHeight);
		}
	else
		showBox.style.display = "none";
	}
//-->
</script>
</head>
<body>
<div id="wrap">
	<a href="javascript:;" onclick="boxAlpha();">点击测试163邮箱效果</a>
</div>
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 测试完成<br /><br /><br /><br />
</div>

<div id="showBox" style="display:none;">
	<div id="msleft">
		<div id="content">
			 <h2>爱左看右</h2>
			 <p><strong>呢称</strong>：爱左看右</p>
			 <p><strong>星座</strong>：螃蟹座(可以横行滴^_^)</p>
			 <p><strong>类型</strong>：半人半神亦半鬼</p>
			 <p><strong>个站</strong>：<a href="http://www.msleft.com" title="爱左看右">http://www.msleft.com</a></p>
			 <p><strong>介绍</strong>：一棵花心的萝卜</p>
			 <p class="intro"><strong>HTML代码功能</strong>：自适应宽高透明遮罩效果</p>
			 <p class="close"><input type="button" name="button" onclick="boxAlpha();" value="关闭" />
		</div>  
	</div>
	<div id="alphaBox"></div>
</div>
</body>
</html>

[ 可以先修改再运行 ]

发布:飞飞 | 分类:特效收集 | 评论:0 | 浏览: | 字号:大中小

笨笨的飞飞

日历

网站目录

最新留言

最近发表

链接

查看其他的友情链接

仿163邮箱的提示框

我来说几句:

笨笨的飞飞

日历

网站目录

最新留言

最近发表

链 接

查看其他的友情链接

仿163邮箱的提示框

我来说几句:

链接