您的位置：首页 > Web前端 > JavaScript

JS可关闭弹出框---[Firefox2与IE6下测试通过，XHTML]

2009-09-07 20:17 411 查看
<!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><title>弹出窗口</title>
<link rel="stylesheet" href="css.css" type="text/css" media="all" />
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<meta name="author" content="kinsunhoo(at)yahoo.com.cn" />
<style type="text/css">
<!--
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, arial, helvetica, sans-serif,??;
color: #060;
background-color: #cccccc;
font-size: 12px;
line-height: 22px;
}

#corner_tips
{
z-index:105;
width: 300px;
padding: 10px;
margin-right:0px;
/* opera does not like 'margin:20px auto' */
background: #FFF;
border: 5px solid #666;
text-align:center;
/* part 2 of 2 centering hack */
width: 300px; /* ie5win fudge begins */
voice-family: "/"}/"";
voice-family:inherit;
width: 270px;
}
//-->
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function hide_div(ID)
{
var div_obj=document.getElementById(ID);
if(div_obj!=null)
{
div_obj.style.display="none";
div_obj.removeNode(true);
return false;
}
}
function create_tips(ID,text)
{
ele=document.createElement("div");
ele.setAttribute("id",ID);
document.body.appendChild(ele);
ele.innerHTML=text;
}

var pop;
var temp_h=0;//
var bc=5;//右下弹出步长
var holdtime=10;//右下弹出窗口完全展开后，保持的时间，单位秒
var KPspeed=20;//KeepPosition()20毫秒执行一次
var PopText="<p>Hello,world!<br /><br />说明：这个提示找完全展开后"+holdtime+"秒后自动慢慢消失<br />这个框的高度自适应提示的内容</p>";
var ktimer;
function Poping(p)
{
var ele=document.getElementById("corner_tips");
pop=p;
if(pop=="close")
{
var tips_H=ele.offsetHeight;
holdtime=-1;
temp_h=tips_H-bc;
ele.innerHTML="<span>正在关闭..</span>"+PopText;
clearTimeout(ktimer);
}
else
{
create_tips("corner_tips","<span>正在打开..</span>"+PopText);
}
PopingUp();

}

function PopingUp()
{
var ele=document.getElementById("corner_tips");
var tips_W=ele.offsetWidth;
var tips_H=ele.offsetHeight;
var tips_X=document.documentElement.clientWidth-tips_W;
var tips_Y=document.documentElement.clientHeight+document.documentElement.scrollTop-temp_h;//滚轮变化
if(temp_h<=tips_H)
{
ele.style.height=temp_h;
ele.style.cssText="position:absolute;top:"+tips_Y+"px;left:"+tips_X+"px;";
temp_h=temp_h+bc;
var Puptime=setTimeout("PopingUp()",20);
}
else
{
//完全展开
clearTimeout(Puptime);
//alert("跳过popingup()");
text="<p><a href=/"javascript:;/" onclick=/"CloseDown();/">关掉弹出窗口</a></p>";
ele.innerHTML=text+PopText;
KeepPosition();
}
}

function KeepPosition()
{
var ele=document.getElementById("corner_tips");
if(ele!=null)
{
if(holdtime>0)
{
//打开后的飘浮

var tips_W=ele.offsetWidth;
var tips_H=ele.offsetHeight;
var tips_X=document.documentElement.clientWidth-tips_W;
var tips_Y=document.documentElement.clientHeight+document.documentElement.scrollTop-tips_H;//滚轮变化
ele.style.cssText="position:absolute;top:"+tips_Y+"px;left:"+tips_X+"px;";
holdtime=holdtime-KPspeed/1000;
ktimer=setTimeout("KeepPosition()",KPspeed);
}
else
{
clearTimeout(ktimer);
ele.innerHTML="<span>正在关闭..</span>"+PopText;
//alert("跳过KeepPosition()");
PopingDown();
}
}

}
function PopingDown()
{
var ele=document.getElementById("corner_tips");
if(ele!=null)
{
var tips_W=ele.offsetWidth;
var tips_H=ele.offsetHeight;
var tips_X=document.documentElement.clientWidth-tips_W;
var tips_Y=document.documentElement.clientHeight+document.documentElement.scrollTop-temp_h;//滚轮变化
if(temp_h>0)
{
ele.style.height=temp_h;
ele.style.cssText="position:absolute;top:"+tips_Y+"px;left:"+tips_X+"px;";
temp_h=temp_h-bc;
var Pdowntime=setTimeout("PopingDown()",20);
}
else
{
//完全缩回去了
clearTimeout(Pdowntime);
hide_div("corner_tips");
return false;
}
}
}
function CloseDown()
{
Poping("close");
}
//-->
</script>
</head>
<body onload="Poping();">
<div align="center">
<p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p>
<p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p><p>d</p>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航