［问题解决］ＩＥ中可以将弹出窗口置于最顶层的方法（即使当前焦点不在，比如最小化了那个IE也能弹出来）

发布: 2007-6-30 18:56 | 作者: admin | 来源: | 查看: 21次 | 进入软件测试论坛讨论

你如果用过ＯＷＡ（Ｅｘｃｈａｎｇｅ的ＷＥＢ端程序）就会知道这个功能是相当吸引人的。
拷贝所有代码，保存为PopupWindow.html,在ＩＥ中运行这个文件，就知道了！：）

所有的代码如下：
ＰｏｐｕｐＷｉｎｄｏｗ．ｈｔｍｌ

<HTML>
<HEAD>
<TITLE>位于最顶层的弹出窗口</TITLE>

<SCRIPT LANGUAGE="JScript">
//建立一个弹出窗口
var oPopup = window.createPopup();

//得到这个弹出窗口的body
var oPopupBody = oPopup.document.body;

//开始显示的坐标（默认是最右下脚）
flyMove.expand = 0;
flyMove.flyY = 0;
flyMove.flyX = 0;

//渐进显示的定时器
var g_idFlyPopup = -1;

//显示弹出窗口的定时器
var TimeoutFlag=-1;

//显示弹出窗口的方法
function richDialog()
{
    //在弹出窗口中写入文字和数据
    oPopup.document.body.innerHTML = oDialog.innerHTML;

    oPopupBody.style.fontSize = document.body.currentStyle.fontSize;
    oPopupBody.style.backgroundColor=@#infobackground@#;
    oPopupBody.style.cursor="pointer";
    oPopupBody.style.color = "infotext";
    oPopupBody.style.borderWidth=@#3px@#;
    oPopupBody.style.borderStyle=@#window-inset@#;
    oPopupBody.style.borderColor=@#activeborder@#;
    //下面代码会立即显示弹出窗口
    //oPopup.show(100, 50, 400, 300);

    flyInit();
    g_idFlyPopup = window.setInterval(flyMove,10);
}

function flyMove()
{
    flyMove.expand += 2;
    flyMove.flyY -= 2;
    oPopup.show(flyMove.flyX-flyMove.expand, flyMove.flyY, flyMove.expand, flyMove.expand);
    var oPopupBody = oPopup.document.body;
    if (oPopupBody.clientWidth >= oPopupBody.scrollWidth && oPopupBody.clientHeight >= oPopupBody.scrollHeight)
    {
        //清除渐进显示的定时器
        window.clearInterval(g_idFlyPopup);
        g_idFlyPopup = -1;

        //清除调用弹出窗口的定时器
        window.clearTimeout(TimeoutFlag);
        TimeoutFlag=-1;

        //注册6秒后关闭弹出窗口的定时器
        window.setTimeout( @#closePopup()@#, 60000 );

    }
}

//关闭弹出窗口
function closePopup()
{
    if( null != oPopup )
    {
        oPopup.hide();
    }
}

//初始化弹出窗口的坐标，将其定位到最右下角
function flyInit()
{
    flyMove.expand = 0;
    flyMove.flyY = window.screen.height;
    flyMove.flyX = window.screen.width;
}

//设定5秒后调用richDialog方法（用于显示弹出窗口）
TimeoutFlag=window.setTimeout( richDialog, 6000 );

</SCRIPT>
</HEAD>

<BODY>
你可以最小化这个窗口，系统会在6秒之后，自动弹出一个位于最顶层的弹出窗口！！！！

<DIV ID="oDialog" STYLE="display:none;">
<div id="myid" style="position:absolute; top:0; left:0; width:100%; height:100%; background:#cccccc; border:1px solid black; border-top:1px solid white; border-left:1px solid white; padding:10px;  font:normal 10pt tahoma; padding-left:18px "> <b>位于最顶层的弹出窗口</b><hr size="1" style="border:1px solid black;"><div style="width:220px; font-family:tahoma; font-size:80%; line-height:1.5em"><br>
很神奇吧！！！！！！！！！
<br>
<br>
<br>
</div>
<br>
<br>
<button tabindex="-1" onclick="parent.oPopup.hide();" style="border:1px solid black; border-left:1px solid white; border-top:1px solid white; background:#cccccc ">关闭窗口</button>
</DIV>
</BODY>
</HTML>