一、在做一个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 οnclick='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="#" οnclick="popmsg('你好<br/>中国<br/>世界');">打开</a> <a href="#" οnclick="pophide();">关闭</a>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/080b644db5c5651f6758f93693982108.bmp)
三、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函数)必须指定窗口的位置和大小,尤其是大小,新窗口可不能自动进行缩放!
二、短消息提示框源代码:拷贝以下代码保存成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 οnclick='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="#" οnclick="popmsg('你好<br/>中国<br/>世界');">打开</a> <a href="#" οnclick="pophide();">关闭</a>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/080b644db5c5651f6758f93693982108.bmp)
三、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函数)必须指定窗口的位置和大小,尤其是大小,新窗口可不能自动进行缩放!