window.createPopup()用法以及短消息提示框代码

来源：互联网发布：mac的屏幕图层脱落编辑：程序博客网时间：2024/04/30 06:39

一、在做一个portal项目时，用户要求在门户首页上的待办信息要有明确的提示，且在浏览器最小化的情况下，当有新的待办信息时，也要做提示。用了alert方法、或者用div的方法都很难实现“在浏览器最小化的情况下弹出提示信息”。alert方法会把信息弹出在桌面的正中央，同时会被其它窗口挡住。用div的方法实现的提示框会依赖于父窗口，因为它本身就是html页面上的一部分。最后发现，用window.createPopup()方法可以完全实现用户的需求。

二、短消息提示框源代码：拷贝以下代码保存成html文件即可。
<html>
<head>
<title>message</title>
</head>
<body>
<SCRIPT>
var oPopup = window.createPopup();
var CW_Body = oPopup.document.body;
var CSStext = "margin:1px;color:black; border:2px outset;background-color:buttonface;width:16px;height:14px;font-size:12px;line-height:11px;cursor:hand;";
var popTop=50;
function popmsg(content){
var temp = "";
CW_Body.style.overflow = "hidden";
CW_Body.style.backgroundColor = "white";
CW_Body.style.border = "solid black 1px";

temp += "<table width=100% height=100% cellpadding=0 cellspacing=0 border=0 >";
temp += "<tr style=';font-size:12px;background:#0099CC;height:20;cursor:default'>";
temp += "<td style='color:white;padding-left:5px'>消息提示</td>";
temp += "<td style='color:#ffffff;padding-right:5px;' align=right>";
temp += "<span id=Close onclick='parent.pophide()' style=/""+CSStext+"font-family:System;padding-right:2px;/" title='关闭'>x</span>";
temp += "</td></tr><tr><td colspan=2>";
temp += "<div id=include style='overflow:scroll;overflow-x:hidden;overflow-y:auto;HEIGHT:100%;padding-left:5px;padding-top:5px;font-size:13px;'>";
temp += content;
temp += "</div>";
temp += "</td></tr></table>";
CW_Body.innerHTML = temp;
popshow();

}

function popshow(){
window.status=popTop;
if(popTop<180){
oPopup.show(screen.width-243,screen.height,241,popTop);
}else if(popTop<220){
oPopup.show(screen.width-243,screen.height,241,173);
}
popTop+=10;
if(popTop<=220)
{
var mytime=setTimeout("popshow();",50);
}
else
{
popTop=1500;
}
}

function pophide(){
window.status=popTop;
if(popTop>1720){
oPopup.hide();
popTop=50;
return;
}else if(popTop>1520&&popTop<1720){
oPopup.show(screen.width-243,screen.height,241,1720-popTop);
}else if(popTop>1500&&popTop<1520){
oPopup.show(screen.width-243,screen.height+(popTop-1720),241,172);
}
popTop+=10;
var mytime=setTimeout("pophide();",50);
}

</SCRIPT>
<a href="#" onclick="popmsg('你好<br/>中国<br/>世界');">打开</a> <a href="#" onclick="pophide();">关闭</a>
</body>
</html>

三、window.createPopup()用法
1、函数没有任何参数
2、CreatePopup函数返回的值是新窗口的句柄，这个窗口是否普通的窗口一样，本人没有测试考证。
3、新窗口的parent属性可以对父级窗口（调用createPopup函数的窗口进行访问）
4、一个窗口只能创建一个popup窗口，新调用createPopup将会吧以前的窗口关闭。
5、新窗口的内容初始的时候是空的，没有任何内容，使用document.write和document.body.innerHTML设置值
6、窗口显示的时候调用popwindow.show函数，调用契约为 show(left,top, width, height, document.body);最后一个参数指明位置属性相对的对象
7、窗口隐藏直接调用hide函数。
8、在父级窗口中点击鼠标将会自动将popwindow隐藏。
9、销毁父亲窗口不一定销毁其创建的popwindow，前提是保存窗口句柄的对象是否被销毁。
10、使用alt-tab转换窗口的时候，有时这些新窗口会悬浮在桌面顶层，不会随IE窗口转到后台而隐藏（IE6、IE7都是）
11、新窗口的对象不能使用父窗口的CSS风格，需要手工复写
12、新窗口中的链接（Anchors）需要注意点击之后链接显示的窗口是当前的窗口，一般无效。
13、新窗口中的JavaScript出现错误的时候并不会在当前的IE状态栏中提示！
14、新窗口的CSS风格不支持expression，晕！
15、显示窗口的时候（调用show函数）必须指定窗口的位置和大小，尤其是大小，新窗口可不能自动进行缩放！