动态提示窗口 - 流浪天边的博客

作者在 2011-01-07 15:07:05 发布以下内容

                    动态提示窗口
   用户单击"测试提示效果"按钮时，showinfo()函数被调用。该函数首先调用initPopup函数，打开只有标题栏新窗口。并通过open方法返回窗口句柄，操作该窗口body元素的样式，然后将变量popup_dir赋值为-1，表明新窗口向上弹出。然后调用函数showPopup函数。
  函数showPopup用来实现将弹出窗口自屏幕右下角向上画出的动态效果。参数Y为该窗口弹出后纵坐标与窗口当前纵坐标差值。该函数首先通过moveTo和resizeTo方法，将窗口拉于右下角相应位置处。然后将"y"值增增一个步长popup_dir判断y值。如果窗口达到弹出窗口位置，则退出该函数，否则间隔两行表后，以新的Y值为参数，在次调用函数"showPopup"

动态窗口源码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态提示窗口</title>
<style>
*{
    font-size:12px;font-family:宋体,Arial;font-weight:normal;color:#333;}/*规定所有字体的样式*/
</style>
<script>
var oPopup;
var winWidth=220,winHeight=140;
var popup_dir;
function initPopup(){
    oPopup=window.open("","_popup","scrollbars=no,status=no,toolbar=no,menubar=no,resizable=no,titlenbar=no,location=no");
    var oBody=oPopup.document.body;
    oBody.style.backgroundcolor="lightyellow";
    oBody.style.borderStyle="none";
    }
function showinfo(str){
    initPopup();
    oPopup.document.body.innerHTML=str;
    popup_dir=-1;
    showPopup(winHeight-100);
    }
    function showPopup(y){
        oPopup.resizeTo(winWidth,winHeight-y);
        oPopup.moveTo(screen.availWidth-winWidth,screen.availHeight-winHeight+y);
        y=+popup_dir;
        if(y>winHeight-100&&popup_dir>0){
            oPopup.close();
            return;
            }else if(y<0&&popup_dir<0){
                popup_dir=2;
                setTimeout("showPopup(0)",2000);
                retrun;
                }else{
                    setTimeout("showPopup("+y+");",2)
                    }
        }
</script>
</head>

<body style="overflow:auto">
<input type="button" value="测试提示效果"Onclick="showinfo('这里提示信息');">
</body>
</html>

嘿嘿！源码大家仔细研究下，很有用，可以做万象啦！