请高人给个控制DIV的代码。要求（透明、定时关闭）

yaoyouyou 2007-03-01 12:09:53

<div>

定位在页面的中央，5秒后自动关闭消失。

谢谢，给个demo

...全文

244 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

rob123 2007-03-01

打赏
举报

基于prototype.js到处都有可以去下.如果不用就抽取需要的部分出来就可以了。
==============================================================================

<!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>div demo</title>
<style>
body {
width:1000px;
height:480px;
}

#demo {
position:absolute;
width:200px;
height:200px;
border:1px solid black;
background-color:#CCCCCC;
text-align:center;
left:50%;
top:50%;
margin:-100px 0px 0px -100px;
filter:alpha(opacity=50);
moz-opacity:0.5;
opacity:0.5;
}

#demo #close {
position:relative;
width:20px;
height:20px;
border:1px solid black;
background-color:#CCCCCC;
text-align:center;
line-height:20px;
float:right;
margin:1px 1px 0px 0px;
cursor:pointer;
}
#demo #close:hover {
background-color:#666666;
color:#FFFFFF;
}
</style>
<script type="text/javascript" src="/script/prototype.js"></script>
<script type="text/javascript">
var dWin = Class.create();
dWin.prototype = {
initialize:function(element){
this.mainWindow = element;
this.mainWindow.style.display = "none";
},
show:function(autoHide,seconds){
this.mainWindow.style.display = "";
if(autoHide){
window.setTimeout(this.hide.bind(this),seconds*1000);
}
},
hide:function(){
this.mainWindow.style.display = "none";
}
}

window.onload = function(){
window.dWin = new dWin(document.getElementById("demo"));
document.getElementById("show").onclick = window.dWin.show.bind(window.dWin,1,5);
document.getElementById("close").onclick = window.dWin.hide.bind(window.dWin);
}
</script>
</head>

<body>
<div id="show">
<a href="#" onclick="return false">show window</a>
</div>
<div id="demo" style="display:none;">
<div id="close">X</div>
</div>
</body>
</html>