js窗口气泡

转载 2013年12月04日 08:57:25

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

一、在做一个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>&nbsp;<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函数)必须指定窗口的位置和大小,尤其是大小,新窗口可不能自动进行缩放!


转载:http://hi.baidu.com/dobodo/item/d2fe9a70aefb9413d0dcb3ba

实现气泡提示窗口

  • 2015年02月07日 23:33
  • 20.96MB
  • 下载

cesium自定义气泡窗口infoWindow

对于习惯arcgis或者openlayer气泡窗口样式的giser来说,感觉不太适应,加上公司的领导也想要arcgis气泡窗口的那种样式效果,所以自定义了类似arcgis模板的气泡窗口模式,可以随着地...

C#模拟MSN气泡提示窗口

  • 2008年02月15日 13:19
  • 133KB
  • 下载

VC++下气泡窗口(ver1.0)

  • 2010年07月23日 11:40
  • 11.08MB
  • 下载

Java Swing实现的仿QQ气泡消息聊天窗口效果

下面讲讲聊天窗口的上半部分聊天消息显示区域的具体实现,尤其是气泡的绘制、图文的混排实现。  先讲讲气泡的实现思路。开始我想过很多气泡的实现方法,在研究了JTextPane的文档类及其内容插入删除排版后...
  • ycb1689
  • ycb1689
  • 2016年09月07日 14:50
  • 2892

vb最小化窗口及气泡提示

  • 2008年04月16日 17:30
  • 2KB
  • 下载

cesium自定义气泡窗口infoWindow后续优化篇

核心的实现思路部分:如何动态刷新气泡窗口的位置 (1)cesium的点击事件Cesium.ScreenSpaceEventType.LEFT_CLICK监听鼠标的当前位置坐标,然后根据当前坐标去动态...

c# winform实现气泡提示窗口

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin...

delphi打造气泡窗口的实现

yu delphi打造气泡窗口的实现  2011年11月07日   [分享]任务栏(Taskbar)是微软公司在Windows 95中引入的一种特殊的桌面工具条,它为用户快速访问计算机资源提供了极大的...

js 特效 html 特效 飘浮的气泡

  • 2011年08月23日 20:40
  • 11KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js窗口气泡
举报原因:
原因补充:

(最多只允许输入30个字)