热烈祝贺台州朗动科技的站长论坛隆重上线!(2012-05-28)    热烈庆祝伟大的祖国60周年生日 点击进来我们一起为她祝福吧(2009-09-26)    站长论坛禁止发布广告,一经发现立即删除。谢谢各位合作!.(2009-08-08)    热烈祝贺台州网址导航全面升级,全新版本上线!希望各位一如既往地支持台州网址导航的发展.(2009-03-28)    台州站长论坛恭祝各位新年快乐,牛年行大运!(2009-01-24)    台州Link正式更名为台州网址导航,专业做以台州网址为主的网址导航!(2008-05-23)    热烈祝贺台州Link资讯改名为中国站长资讯!希望在以后日子里得到大家的大力支持和帮助!(2008-04-10)    热烈祝贺台州Link论坛改名为台州站长论坛!希望大家继续支持和鼓励!(2008-04-10)    台州站长论坛原[社会琐碎]版块更名为[生活百科]版块!(2007-09-05)    特此通知:新台州站长论坛的数据信息全部升级成功!">特此通知:新台州站长论坛的数据信息全部升级成功!(2007-09-01)    台州站长论坛对未通过验证的会员进行合理的清除,请您谅解(2007-08-30)    台州网址导航|上网导航诚邀世界各地的网站友情链接和友谊联盟,共同引领网站导航、前进!(2007-08-30)    禁止发广告之类的帖,已发现立即删除!(2007-08-30)    希望各位上传与下载有用资源和最新信息(2007-08-30)    热烈祝贺台州站长论坛全面升级成功,全新上线!(2007-08-30)    
便民网址导航,轻松网上冲浪。
台州维博网络专业开发网站门户平台系统
您当前的位置: 首页 » HTML/XHTML/XML编程 » 类似网易邮箱半透明提示效果的实现

类似网易邮箱半透明提示效果的实现

论坛链接
  • 类似网易邮箱半透明提示效果的实现
  • 发布时间:2007-10-05 16:20:22    浏览数:6083    发布者:tznktg    设置字体【   
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>类似网易邮箱的半透明信息提示效果</title>
<meta name="author" content="年华@Master8.NET" />
<style>
body { background-color:#FFFFFF; margin:0;}
li,td,div,body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; }
</style>
</head>
<body>
<script type="text/javascript">//必须body中引用
var width=300;
var height=200;
var bgcolor="#EEEEEE";//半透明窗口背景色DivMid
var trans=90;
var body = document.body;
var bodyWidth = parseInt((body.scrollWidth<body.clientWidth)?body.clientWidth:body.scrollWidth);
var bodyHeight = parseInt((body.scrollHeight<body.clientHeight)?body.clientHeight:body.scrollHeight);
var clientWidth=body.clientWidth;
var clientHeight=body.clientHeight;
//开始创建DivTop 最上信息层
var DivTop = document.createElement("div");
with(DivTop.style)
{
display = "none";
zIndex = 3;
position = "absolute";
border = "0px";
}
DivTop.id = "Div3";

body.appendChild(DivTop);
DivTop.innerHTML = "<table cellspacing=\"0\" cellpadding=\"0\" style=\"width:"+width+"px;border:#0051E5 1px solid;background:#FFFFFF;\"><tr><td style=\"background:#0051E5;color:#FFFFFF;font-size:13px;height:18px;\"><span style=\"float:right\"><a href=\"javascript:Close();\" style=\"color:#FFFFFF;text-decoration:none;background:#CC4332;display:block;padding:1px;height:14px;width:14px;font-size:12px;overflow:hidden;\">×</a></span> 信 息 提 示</td></tr><tr><td style=\"line-height:180%;padding:2px;\"> 类似网易邮箱的半透明信息提示效果<br /> <a href=\"http://master8.net\">Master8.NET</a></td></tr></table>";

//开始创建DivMid 中间半透明层
var DivMid = document.createElement("div");
with(DivMid.style)
{
display = "none";
zIndex = 2;
position = "absolute";
height = "100%";
width = "100%";
top = 0;
left = 0;
border = "0px";
backgroundColor = bgcolor;
}
DivMid.id = "Div2";
body.appendChild(DivMid);

function $(Id) { return document.getElementById(Id); }
function isIE()
{
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}

function center(win)//将主窗口置于网页正中
{
var s = parseInt(body.scrollTop + clientHeight/2 - height/2);
win.style.top = (s<body.scrollHeight-height)?s:body.scrollHeight;
var s = parseInt(body.scrollLeft + clientWidth/2 - width/2);
win.style.left = (s<body.scrollWidth-width)?s:body.scrollWidth;
}

function Open(){

with(body.style)//完全锁定背景层
{
width = clientWidth;
height = clientHeight;
overflow = "hidden";
}
with($('Div2').style)
{
width = bodyWidth;
height = bodyHeight;
overflow = "hidden";
display = "";
if (isIE()){
filter = " Alpha(Opacity="+trans+")";
}else{
opacity = trans/100;
}

}
with($('Div3').style)
{
display = "";
}
center($('Div3'));

}

function Close(){
with(body.style)
{
width = bodyWidth;
height = bodyHeight;
overflow = "auto";
}
with($('Div2').style)
{
display = "none";
}
with($('Div3').style)
{
display = "none";
}

}
Open();
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p align="center"><a href="javascript:Open()">Click To Open</p>
<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 />
</body>
</html>
娱乐休闲专区A 影视预告B 音乐咖啡C 英语阶梯D 生活百科
网页编程专区E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技术区 N 系统管理O 服务器架设P 网络/硬件Q 编程序开发R 内核/嵌入
管理中心专区S 发布网址T 版主议事U 事务处理