Web的桌面提醒（Popup）-宝玉的blog

大多数Windows程序都有桌面提醒（Popup）功能，如Msn Messenger，Outlook2003，FoxMail，SharpReader等，对用户来说可以非常的方便最新的信息。

在Web中借用IE5.5+的Popup，也可以实现类似的功能，在CnForums1.2中新增了一种特性就是类似于Outlook2003一样，当有新帖子/私人留言时就有Popup提示，如图：
现在就技术问题介绍一下：

一，什么是Popup

在IE5.5+中开始支持的Popup窗口有很多很特别的特性：

Popup窗口可以超出浏览器窗口区域；
可以不用担心被下拉框、flash、Iframe等这些东西遮挡；
即时窗口没有焦点，Popup窗口也可以弹出并显示
一个Popup窗口打开后，当在它的区域以外点击或者另一个Popup窗口被打开时都会自动关闭；
Popup窗口是没有焦点的；
用户不能改变Popup窗口大小；
Popup窗口中的内容是不能被选择的；
......

只是Web下的Popup比起Windows中的Popup还是弱一些，但是已经够用了。Msdn上对Popup有非常详细的介绍“Using the Popup Object (Internet Explorer - DHTML) ”

二，怎么创建一个Popup

Msdn上的示例代码：

// 创建Popup对象
var oPopup = window.createPopup();
// Popup对象和Window对象一样，里面包含了一个完整的HTML文档
var oPopupBody = oPopup.document.body;

// 在Body中插入HTML
oPopupBody.innerHTML = "Display some <B>HTML</B> here.";
// 设置显示的位置、大小、参照物
oPopup.show(100, 100, 200, 50, document.body);

三，Popup的显示

多个Popup不能共存（Popup中创建Popup除外），所以web中的Popup不方便像Msn Messenger的Popup提示那样“爬楼梯”，所以最简单有效的方法就是像Outlook2003的Popup一样，逐个Popup提醒。
（参考WebMessenger的实现）用Js建个队列，将需要Popup提示的内容都放在队列中，用一个定时器，定时从队列中取一个Popup，每个Popup显示7秒。

四，怎么知道有新帖子

在Web程序中，只能通过“拉”的技术，即定时向服务器发送请求——通过定时刷新或者是xmlhttp的Get。
我们需要有个时间戳来记录最后请求时间，这样就好根据这个时间戳来获取时间戳之后的帖子。
如果每次根据时间戳来获取最新帖子，服务器负荷比较大，因为并不是每次请求都有新帖子的，优化一下，再给每个在线用户设置有无新帖子、有无新留言的状态位，当发表新帖子后更新每个人的“有无新帖”状态位。这样每次请求时先判断有没有新帖子，如果有新帖子，才获取所有帖子的标题和内容简要。

五，具体实现

客户端代码：http://webuc.net/MyProject/Popup/popup.htm
http://webuc.net/MyProject/Popup/popup.rar

和论坛程序的结合：
demo: http://bbs.openlab.net.cn (登录后有新帖子即提示(IE5.5+))
http://bbs.openlab.net.cn/PostAttachment.aspx?PostID=376725

参考文章：无限菜单之 xml+popup 版(IE5.5+)

打印 | 张贴于 2005-01-19 11:43:00

留言反馈

#回复: Web的桌面提醒（Popup）编辑

如何去掉页面中的那个popup呢？只要弹出的那个！

2007-10-19 16:39:00 | [匿名用户:地方]

#Web的桌面提醒（Popup）编辑

大多数Windows程序都有桌面提醒（Popup）功能，如Msn Messenger，Outlook2003，FoxMail，SharpReader等，对用户来说可以非常的方便最新的信息。即时窗口没有焦点，Popup窗口也可以弹出并显示一个Popup窗口打开后，当在它的区域以外点击或者另一个Popup窗口被打开时都会自动关闭；Popup窗口是没有焦点的；

2007-08-04 17:45:00 | [匿名用户:minidick]

#Web的桌面提醒（Popup）编辑

本文来自于宝玉的Bloghttp://blog.joycode.com/dotey/archive/2005/01/19/43277.aspx大多数Windows程序都有桌面提醒（Popup）功能，如...

2007-08-02 15:02:00 | [匿名用户:yiki]

#re: Web的桌面提醒（Popup）编辑

请告诉我怎么解决上面的问题!
我的邮箱是firmstone1@hotmail.com

2006-06-01 15:10:00 | [匿名用户:bug]

#re: Web的桌面提醒（Popup）编辑

我有一个日历控件,我在windows xp sp2环境下,用window.createPopup()弹出选择,
在popup中我放了一个选择年份的下拉框,点击年份下拉框,弹出选项列表很长,超出popup的范围,在超出的部分选择下拉框时,就关闭了popup,在windows 2000+IE 6.0.2800.1106下弹出的年份列表不会太长,选择都没问题!各位高人怎么解决这问题!

2006-06-01 15:07:00 | [匿名用户:bug]

#re: Web的桌面提醒（Popup）编辑

DfFffffsddddddddddddddddddddddddddddddddddddaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaafdssssssssssssssssssssssssdffffffffffffffffffffffffdfffffffffffffffffffffffdsaf

2006-03-27 20:29:00 | [匿名用户:a]

#re: Web的桌面提醒（Popup）编辑

2006-03-27 20:28:00 | [匿名用户:a]

#re: Web的桌面提醒（Popup）编辑

用html格式中打开新窗口的那个命令

2006-02-18 21:32:00 | [匿名用户:的拉]

#re: Web的桌面提醒（Popup）编辑

很不错，不过希望能告知popup窗口中的连接是否可以打开新窗口呢？和asp可以通信吗？如何实现？

2005-12-26 19:41:00 | [匿名用户:杀意]

#re: Web的桌面提醒（Popup）编辑

能不能让这个popup提醒，每隔一定的时间，再次弹出啊

2005-10-17 17:03:00 | [匿名用户:Tbreeze]

#re: Web的桌面提醒（Popup）编辑

Good

2005-10-11 10:09:00 | [匿名用户:dragonpro]

#re: Web的桌面提醒（Popup）编辑

不错，向宝玉请教个问题：asp.net怎么实现服务器之间的文件拷贝，应该是调用操作系统的命令，服务器当然都是Windows2000以上的操作系统

2005-08-18 11:19:00 | [匿名用户:清平]

#re: Web的桌面提醒（Popup）编辑

能不能给出一些常用的popup的方法和属性？？谢谢

2005-08-11 17:44:00 | [匿名用户:MiniUFO]

#re: Web的桌面提醒（Popup）编辑

如果POPUP上面的链接点击后打开一个新的窗口该怎么做啊，好象不支持WINDOW.OPEN吧??

2005-05-22 20:00:00 | [匿名用户:snowflying]

#re:Web的桌面提醒（Popup）编辑

^_~,pretty good!csharpsseeoo

2005-05-17 22:48:00 | [匿名用户:绝缘电阻测试仪]

#re:Web的桌面提醒（Popup）编辑

^_^,Pretty Good!

2005-04-16 04:52:00 | [匿名用户:螺杆泵]

#re:Web的桌面提醒（Popup）编辑

^_^,Pretty Good!

2005-04-10 20:10:00 | [匿名用户:气体计量计]

#re: Web的桌面提醒（Popup）编辑

您可以通过popup.hide();popup.Show(...)改变大小

2005-03-01 10:35:00 | [匿名用户:宝玉]

#re: Web的桌面提醒（Popup）编辑

這個東東能不能動態改變大小的?

我用 resizeTo() 好像都沒用的!

oPupup.resizeTo(500, 400);

2005-03-01 10:30:00 | [匿名用户:ashuai]

#re: Web的桌面提醒（Popup）编辑

如果后台的query.aspx.cs经过一段时间计算后，想要以popup方式通知web用户可以看计算结果了，那么query.aspx.cs如何调用query.aspx中的script呢？也就是说，popup行为由服务器这边驱动：
<script>
var p = new Popup("popupWin", "运算已完毕了。", "images/popup_icon_Post.gif",
"敬请观看结果", func);
var delta = p.ShowTime();
if (delta == null)
{
if (!this.Disabled)
p.Show();
}
else if ((p.popup == null) || (!p.popup.isOpen) || (!p.isMouseOver && delta >= 7))
{
p.Hide();
}

function func(popup)
{
}

2005-01-27 18:54:00 | [匿名用户:yun.zheng]

#re: Web的桌面提醒（Popup）编辑

2005-01-21 16:22:00 | [匿名用户:宝玉]

#re: Web的桌面提醒（Popup）编辑

如何让Popup出现滚动条？如果Popup中的内容超出Popup的显示范围，不会出现滚动条，其他的内容看不到~~~

2005-01-21 15:29:00 | [匿名用户:CodingPCPiG]

#Web的桌面提醒（Popup）编辑

Ping Back来自：www.donews.net

2005-01-20 12:32:00 | [匿名用户:poiuytre]

#re: Web的桌面提醒（Popup）编辑

不错哦.
从来没有考虑过popup弹popup

看来这个功能会有更好的应用.

<script>

var p1=window.createPopup();
p1.document.body.style.cssText='background-color:green';
p1.show(123,234,100,200);

var p2=p1.document.parentWindow.createPopup();
p2.document.body.style.cssText='background-color:green';
p2.show(323,434,100,200);

</script>

2005-01-19 21:31:00 | [匿名用户:Lostinet]

#re: Web的桌面提醒（Popup）编辑

to birdshome :
方便写个例子说明一下么？谢谢！

2005-01-19 14:41:00 | [匿名用户:宝玉]

#re: Web的桌面提醒（Popup）编辑

Popup窗口是没有焦点的；
Popup窗口中的内容是不能被选择的；
这两条MSDN说的是错的或是不确切的。

2005-01-19 14:19:00 | [匿名用户:birdshome]

#re: Web的桌面提醒（Popup）编辑

to 大郎:
你给的那个网址里面是用的一个绝对定位的层，类似于EeekSoft.Web.PopupWin 的实现

2005-01-19 12:27:00 | [匿名用户:宝玉]

#re: Web的桌面提醒（Popup）编辑

EeekSoft.Web.PopupWin这个只能在浏览器内部:)

2005-01-19 12:23:00 | [匿名用户:宝玉]

#re: Web的桌面提醒（Popup）编辑

EeekSoft.Web.PopupWin 那个好象不能超出浏览器窗口区域吧~

2005-01-19 12:21:00 | [匿名用户:andrewbao]

#re: Web的桌面提醒（Popup）编辑

以前在CodeProject上看到一个：EeekSoft.Web.PopupWin
好象就是干这个的。

2005-01-19 12:12:00 | [匿名用户:na57]

对不起，目前本随笔不允许发表新评论.

宝玉的blog

导航

关于

每月存档

最新留言

广告

留言反馈