一个WEB 弹窗

写一个Web 弹窗。当窗口改变大小，滚动窗口滑块时也会在右下角显示，具体看代码吧。大家都懂的。

<!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>Fixed</title>
</head>

<body style="background-color:#333333;  font-family:Helvetica, sans-serif;">
<div style="height:800px; background-color:#339933; border:solid 2px #FFFF00;">

    <div style="background-color:#FF6600;height:70px; font-family:Verdana, Arial, Helvetica, sans-serif;font-size:36px;"> Web Brower Pop dialog!</div>

    <div id="foatdiv" style=" border:solid 2px #000000;height:300px;width:300px; position:fixed; background-color:#FF3399; color:#66FF00;"> 
        <div style="height:30px; background-color:#9900CC; font-size:18px;">Pop Dialog Title</div>
         Foat 
    </div>
 
</div>

<script type="text/javascript">

var foatNode=document.getElementById("foatdiv");//要弹出的DIV节点
var h=1;//增长量

//窗口改变大小时 弹窗 的变动
window.onresize=function()
{
    var x= document.documentElement.clientWidth;
    var y=document.documentElement.clientHeight;
    x=x-310;
    y=y-310;
    foatNode.style.left=x+"px";
    foatNode.style.top=y+"px";
};

//访问页面时弹窗从右下角弹出
var timer=setInterval(function(){
    var x= document.documentElement.clientWidth;
    var y=document.documentElement.clientHeight;
    x=x-310;
    y=y-h;
    foatNode.style.left=x+"px";
    foatNode.style.top=y+"px";
    h+=5;
    if(h>=315)
    {
        clearInterval(timer);
    }
    },10);

</script>
</body>
</html>
posted @ 2011-08-19 15:35  kingNull  阅读(1660)  评论(0)  编辑  收藏  举报