实现半透明信息提示效果

<!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" lang="gb2312">
<head>
<head>
<title> 演示实例：半透明信息提示效果 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CNLei.y.l@gmail.com">
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css" media="all">
a,a:visited {color:#00f;text-decoration:none;}
body {margin:0;padding:0;font-size:12px;text-align: center;}
dl {width:550px;margin:25px auto 0 auto;text-align:left;font-size:14px;}
dt {color:#e00;font-weight:bold;padding:0 0 5px 40px;;}
dd {line-height:150%;}

/*关键CSS代码开始*/
body.Normal #Filter,body.Normal #MsgBox {display:none;}
#Filter {
position: absolute;
top: 0;
left: 0;
height: 600px;
width: 100%;
background: transparent;
background:#ccc; /*自己调整背景颜色*/
filter:alpha(opacity=90); /* IE */
-moz-opacity:0.90; /* Moz + FF */
opacity: 0.9; /* 支持CSS3的浏览器（FF 1.5也支持）*/
text-align: center;
z-index:100;
}
#MsgBox {
position: absolute;
top: 100px;
left: 0;
padding:50px 0;
width:360px;
background: transparent;
background: #fff;
z-index:999;
border:1px solid #00f;
}
</style>
<script type="text/javascript">
<!--
function MyAlert(){
 if (document.body.className!="Normal"){
 document.body.className="Normal";
 } else {
 document.body.className="";
 var nLeft=(document.body.offsetWidth-document.getElementById("MsgBox").offsetWidth)/2;
 document.getElementById("MsgBox").style.left=nLeft+"px";
 }
}
-->
</script>
</head>
<body class="Normal">
<dl style="margin:100px auto 50px auto;">
 <dd style="padding:0 0 0 150px;"><a href="javascript:MyAlert();"><strong style="color:#00f;">==&gt; 点击这里 &lt==</strong></a></dd>
</dl>
<dl>
 <dt>原创作品：</dt>
 <dd>1. <a href="http://www.cnlei.org/mycode/CNLTreeMenu/Ver1.0.2/index.html">CNL Tree Menu 无限级CSS树形菜单 兼容各浏览器</a>&nbsp;&nbsp;By CNLei , 2006-2-13</dd>
</dl>
<div id="Filter">&nbsp;</div>
<div id="MsgBox">
<p>请在此输入提示信息！</p>
<p><input type="submit" value="确定" onclick="MyAlert();" /></p>
</div>
</body>
</html>
posted @ 2007-01-19 11:32  '.Elvis.'  阅读(337)  评论(0)    收藏  举报