一个不错的可拖动层遮罩加ALPHA滤镜(点击弹出后背景变浅色，信息提示框效果)

<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>提示信息框</title>
<styletype="text/css">
a{color:#000;font-size:12px;text-decoration:none}
a:hover{color:#900;text-decoration:underline}
body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366);overflow:hidden}
#massage_box{position:absolute;left:expression((body.clientWidth-350)/2);top:expression((body.clientHeight-200)/2);width:350px;height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2);z-index:2;visibility:hidden}
#mask{position:absolute;top:0;left:0;width:expression(body.scrollWidth);height:expression(body.scrollHeight);background:#666;filter:ALPHA(opacity=60);z-index:1;visibility:hidden}
.massage{border:#036solid;border-width:1131;width:95%;height:95%;background:#fff;color:#036;font-size:12px;line-height:150%}
.header{background:#036;height:10%;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;padding:3505;color:#fff}
</style>

<scriptlanguage="javascript">
varObj=''
document.onmouseup=MUp
document.onmousemove=MMove

functionMDown(Object){
Obj=Object.id
document.all(Obj).setCapture()
pX=event.x-document.all(Obj).style.pixelLeft;
pY=event.y-document.all(Obj).style.pixelTop;
}

functionMMove(){
if(Obj!=''){
document.all(Obj).style.left=event.x-pX;
document.all(Obj).style.top=event.y-pY;
}
}

functionMUp(){
if(Obj!=''){
document.all(Obj).releaseCapture();
Obj='';
}
}
</script>
</head><body>
<divid="massage_box"><divclass="massage">
<divclass="header"onmousedown=MDown(massage_box)><divstyle="display:inline;width:150px;position:absolute">本站提示信息</div>
<spanonClick="massage_box.style.visibility='hidden';mask.style.visibility='hidden'"style="float:right;display:inline;cursor:hand">×</div>
<ulstyle="margin-right:25"><li>
</li><li></li><li>CORANGE的测试内容</li></ul></div></div>
<divid="mask"></div>
<spanonClick="mask.style.visibility='visible';massage_box.style.visibility='visible'"style="cursor:hand"><ahref="#">显示提示信息</a>
 bottomhere
</body>
</html>
http://www.corange.cn/archives/2008/04/1018.html

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论