第2章 窗口与导航条设计
2.1 弹出窗口控制
本节所说的弹出窗口是指通过window.open() 方法打开的新窗口，这种弹出窗口在网站中经常会用到，如尽人皆知的弹出式网站公告或广告、打开新窗口显示公告的详细内容等。下面将通过具体实例介绍如何控制弹出窗口。
实例027 打开新窗口显示广告信息
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\02\027
实例说明
广告是网站最大的盈利手段，任何网站都不可能将其省略，那么，如何才能在保证用户顺畅地浏览网站信息的同时，又能让网站经营者从网站广告中获利呢？这可以通过打开新窗口显示网站广告信息的方法实现。本实例将介绍如何制作一个单独的广告窗口，在用户访问网站时自动弹出，而且用户可以随时将其关闭。运行本实例，将打开一个新窗口显示广告信息，如图2.1所示。
图2.1 打开新窗口显示广告信息
技术要点
本实例主要应用JavaScript脚本语言中的window对象的open() 方法实现。在JavaScript中，window对象代表的是一个Web浏览器窗口或者窗口中的一个框架，可以使用window对象对Web浏览器窗口或者窗口中的框架进行控制。window对象的常用方法如表2.1所示。
表2.1 window对象的常用方法
下面将对本实例中应用到的open()方法进行详细介绍。
window对象的open()方法用于打开浏览器窗口。使用window对象打开窗口的语法格式如下：
windowVar=window.open(url,windowname[,location]);
参数说明：
● windowVar：当前打开窗口的句柄。如果open()方法执行成功，则windowVar的值为一个window对象的句柄，否则windowVar的值是一个空值。
● url：目标窗口的URL。如果URL是一个空字符串，则浏览器将打开一个空白窗口，允许用write()方法创建动态HTML。
● windowname：window对象的名称。
● location：对窗口属性进行设置，其可选参数如表2.2所示。
表2.2 对窗口属性进行设置的可选参数
注意：当window对象赋予参数后，也可以使用窗口句柄的close()方法关闭窗口。
实现过程
在网站首页编写代码使每次进入网站首页时弹出新窗口显示广告信息，代码如下：
<script language="javascript">
<!--
window.onload=function(){
window.open("ad.htm","advertise","width=385,height=257,top=10,left=20"); //打开新窗口
}
-->
</script>
举一反三
根据本实例，读者可以：
开发大型门户网站中弹出广告窗口；
开发商务网站中弹出公告或广告窗口；
开发信息资讯网站中弹出公告或广告窗口。
实例028 自动关闭的广告窗口
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\02\028
实例说明
进入网站后，很多网站都会弹出新窗口（如广告等），多数窗口需要浏览者自行关闭，为了方便浏览者对页面信息的浏览，笔者在这里运用了一种新的方法来解决关闭弹出窗口的问题。当浏览者浏览网站时，无需关闭弹出的新窗口，在页面运行超过设定的时间之后，该窗口便自动关闭，这大大方便了浏览者。运行本实例，将弹出一个新窗口显示广告信息，如图2.2所示，在页面运行5s后，弹出的广告窗口将自动关闭。
图2.2 自动关闭的广告窗口
技术要点
本实例主要应用window对象的setTimeout() 方法和close() 方法实现。window对象的setTimeout() 方法用于延迟执行某一操作。
window对象的setTimeout() 方法的语法格式如下：
setTimeout(expression,secdelay[,language])
参数说明：
● expression：是一个字符串，可包含任何对函数、方法或者单个JavaScript语句的调用。
● secdelay：指定运行间隔的时间，以毫秒（ms）为单位。
● language：指定语句或参数expression调用的函数所使用的脚本语言。如果完全使用JavaScript，则不需设置该参数。
说明：1000ms等于1s。
实现过程
（1）在页面中添加如下代码实现打开新窗口的功能：
<script language="javascript">
<!--
window.onload=function(){
window.open("ad.htm","advertise","width=300,height=191,top=10,left=20");
}
-->
</script>
（2）在弹出的广告窗口中通过设置window对象的setTimeout() 方法，实现窗口自动关闭的功能，代码如下：
<body onload="window.setTimeout('window.close()',5000)">
举一反三
根据本实例，读者可以：
在编写商务网站时应用此技术；
在开发信息资源网站时应用此技术；
在编写教育信息网站时应用此技术。
实例029 弹出窗口居中显示
本实例是一个美化界面、简化操作的程序
实例位置：光盘\mingrisoft\02\029
实例说明
使用过JavaScript的window.open() 语句打开新窗口的读者都知道，在使用window.open() 语句打开新窗口时，新弹出的窗口默认是居左上端显示的，这样如果弹出的窗口比较小，一般不会引起浏览者的注意，如果让其居中显示就会很直观了。本实例将介绍如何让弹出的窗口居中显示。运行本实例，单击页面下方的“TOP”后的横线超链接，即可弹出居中显示的管理员登录窗口，如图2.3所示。
图2.3 弹出窗口居中显示
技术要点
本实例首先应用JavaScript中的window对象的open()方法，打开指定的新窗口，然后通过screen对象，获取屏幕的分辨率，再根据获取的值通过window对象的moveTo()方法，将新窗口移动到屏幕居中位置。由于window对象的open()方法在实例027中已经介绍，下面只介绍window对象的moveTo()方法和screen对象。
moveTo()方法将窗口移动到指定坐标（x,y）处，其语法格式如下：
window.moveTo(x,y)
其中参数x,y表示窗口移动到的位置处的坐标值。
注意：moveTo()方法是Navigator和IE都支持的方法，它不属于W3C标准的DOM。
screen对象是JavaScript中的屏幕对象，反映了当前用户的屏幕设置。该对象的常用属性如表2.3所示。
表2.3 screen对象的常用属性
实现过程
（1）在页面的适当位置添加控制窗口弹出的超级链接，本例中采用的是图片热点超级链接，关键代码如下：
<img src="Images/re_top.gif" width="208" height="56" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="141,26,200,30" href="#" onClick="manage()">
</map>
（2）编写自定义的JavaScript函数manage()，用于弹出新窗口并设置其居中显示，代码如下：
<script language="javascript">
function manage(){
var hdc=window.open('Login_M.jsp','','width=322,height=206');
width=screen.width; //获取屏幕的宽度
height=screen.height; //获取屏幕的高度
hdc.moveTo((width-322)/2,(height-206)/2); //改变窗口的位置
}
</script>
（3）设计弹出窗口页面Login_M.jsp。
举一反三
根据本实例，读者可以：
将弹出的用户登录窗口居中显示；
将弹出的广告窗口居中显示；
将弹出的显示详细信息页居中显示。
实例030 打开新窗口显示详细信息
本实例是一个方便、实用的程序
实例位置：光盘\mingrisoft\02\030
实例说明
在网页设计时，通常需要考虑页面的美观程度及其下载速度，这时可以把要显示数据的概要信息显示在主页面中，并提供显示详细信息的细节页面的超链接，这样不但可以提高页面的下载速度，而且可以简化界面。运行本实例，在GO购电子商城后台管理的商品信息管理模块中，商品信息主页面中只显示了商品名称、商品简介等概要信息，单击“商品名称”的超级链接即可打开显示商品详细信息的新窗口，在该窗口中可以查看指定商品的详细信息，如图2.4所示。
图2.4 打开新窗口显示详细信息
技术要点
本实例主要应用window对象的open() 方法打开新窗口，在打开新窗口时，将商品ID信息传递到新窗口中。这时的open() 方法的语法格式如下：
window.open("链接文件名?参数名称=参数值","","width=窗口的宽,height=窗口的高")
技巧：在传递参数超链接时，多个参数之间用“&”分隔。
实现过程
（1）制作显示商品概要信息的主页面。在该页面中加入空的超链接，并在其单击事件中加入JavaScript脚本，实现打开新窗口显示商品详细信息的功能。这里需注意的是，在打开新窗口时，需要将商品ID号作为参数进行传递，关键代码如下：
<a href="#"
onClick="window.open('goods_detail.jsp?ID=<%=ID%>','','width=587,height=230')">
<%=goodsName%></a>
（2）制作显示商品详细信息的细节页面。在该页面中通过request.getParameter("ID")来获取主页面中传递的商品ID号，并根据商品ID号建立结果集，用于显示商品的详细信息，关键代码如下：
<%@ page import="com.core.ConnDB" %>
<%
ConnDB conn=new ConnDB();
int ID=-1;
ID=Integer.parseInt(request.getParameter("ID"));
if(ID>0){
ResultSet rs=conn.executeQuery("select ID,GoodsName,Introduce,nowprice,picture from tb_goods where ID="+ID);
int goodsID=-1;
String goodsName="";
String introduce="";
float nowprice=(float)0.0;
String picture="";
if(rs.next()){
goodsID=rs.getInt(1);
goodsName=rs.getString(2);
introduce=rs.getString(3);
nowprice=rs.getFloat(4);
picture=rs.getString(5);
}
%>
… //此处省略了显示商品信息的HTML代码
<%conn.close();
}else{
out.println("<script lanage='javascript'>alert('您的操作有误');window.location.href='index.jsp';");
}%>
举一反三
根据本实例，读者可以：
开发新闻系统中的即时新闻、热点新闻等；
开发电子商务系统中的商品展示；
开发在线论坛中的主题信息浏览。
实例031 弹出窗口的Cookie控制
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\02\031
实例说明
在很多网站中都应用了弹出窗口显示广告信息，每次访问网站都会弹出相同的广告窗口，久而久之就会让人产生厌倦感了。为了解决该问题，本实例将介绍一种只有第一次访问网站时才弹出广告窗口的方法。运行本实例，将弹出图2.5所示的广告窗口，关闭浏览器后再次运行本实例，广告窗口将不再自动弹出。
图2.5 弹出窗口的Cookie控制
技术要点
Cookie是网站在访问者硬盘上存储的一些定制的信息段。通过浏览器，网页可以实现对Cookie的存储、获取和删除。Cookie的目的只有一个，即记录访问者的个体信息。在开始使用Cookie前，读者需要知道下面的规则。
浏览器可以存储的总Cookie数量不能超过300个，每个服务器不得超过20个（对于整个服务器来说的，而不仅仅是用户自己的网页或网站）。存储容量也限制在每个Cookie 4KB，所以不要试图在一个Cookie中存储过多的信息。默认情况下，一个Cookie可以在整个浏览器的运行期间存在；当用户退出浏览器后，Cookie内容也就会消失。为了让一个Cookie的持续时间超过一个浏览周期，可以设置失效日期。
注意：document.cookie对象并不会直接连接到用户的硬盘上，它只是映射所有存储在硬盘里的Cookie。
实现过程
（1）建立一个预打开的placard.htm文件，通常该文件中放置广告或公告信息，本例中放置的是公告信息。
（2）在需要弹出公告窗口的页面中，判断客户端的浏览器中是否存在指定的Cookie，如果不存在，则弹出新窗口显示公告信息，否则不弹出公告窗口，代码如下：
<Script Language="JavaScript">
function openWindow(){
window.open("placard.htm","","width=381,height=228") //打开新窗口
}
function GetCookie(name){ //获取Cookie
var search = name + "=";
var returnvalue = "";
var offset,end;
if(document.cookie.length>0){
offset=document.cookie.indexOf(search); //查询指定的cookie
if(offset != -1){
offset += search.length;
end = document.cookie.indexOf(";",offset);
if(end == -1) end = document.cookie.length;
returnvalue = unescape(document.cookie.substring(offset,end));
}
}
return returnvalue;
}
function LoadPop(){
if(GetCookie("pop")==""){
openWindow(); //打开新窗口
var today=new Date() //创建Date对象
var time="Sunday,1-jan-"+today.getYear()+1+" 23:59:59 GMC";
document.cookie="pop=yes;expires="+time;
}
}
（3）在需要弹出广告窗口页面的onLoad事件中调用弹出广告窗口的函数，代码如下：
<body onLoad="LoadPop()">
技巧：当浏览者将弹出的窗口关闭之后，再次进入该网站时，此窗口将不会再出现。如果想让该窗口再次出现，可以选择“工具”→“Internet选项”命令，在弹出的对话框中从“常规”选项卡中单击“删除Cookies”按钮，单击“确定”按钮即可。
举一反三
根据本实例，读者可以：
开发游戏网站中的系统公告；
开发新闻资讯类网站中的最新公告；
开发大型门户类网站中的弹出广告。
实例032 为弹出的窗口加入关闭按钮
本实例是一个方便操作、提高效率的程序
实例位置：光盘\mingrisoft\02\032
实例说明
使用Windows操作系统的用户都知道单击IE窗口中的关闭按钮
时，可以关闭窗口，但是这样有时并不是很直观。为了方便用户，可以在弹出的窗口中加入“关闭”按钮。运行本实例，单击“程序员心声”超链接，将弹出程序员心声详细信息页面，如图2.6所示。在该图的右下角有一个橘黄色的“关闭”按钮，单击该按钮可以将当前窗口关闭。
图2.6 为弹出的窗口加入关闭按钮
技术要点
本实例主要应用window对象的close()方法实现。close()方法的语法如下：
window.close();
功能：window对象的close()方法用于自动关闭浏览器窗口。
注意：应用window对象的close()方法关闭弹出的窗口时，和单击IE标题栏中的关闭按钮
是一样的，但是如果关闭IE的主窗口时，系统就会弹出“是否关闭此窗口”的确认对话框，只有单击“是”按钮后才可以关闭IE的主窗口。至于如何在关闭IE的主窗口时，不弹出确认对话框的方法参见实例034。
实现过程
（1）创建提供“程序员心声”超链接的文件，注意该超链接需要执行的操作应该是应用window.open() 方法打开新窗口。代码如下：
<a href="#" onClick="window.open('thinking.jsp','','width=450,height=300')">程序员心声</a>
（2）在“程序员心声”窗口中加入“关闭”按钮，关键代码如下：
<input name="Button" type="button" class="btn_grey" value="关闭" onClick="window.close();">
举一反三
根据本实例，读者可以：
实现打开新窗口显示新闻详细信息页面；
在弹出的网站公告窗口中加入“关闭”按钮。
实例033 关闭弹出窗口时刷新父窗口
本实例是一个提高效率、人性化的程序
实例位置：光盘\mingrisoft\02\033
实例说明
关闭弹出窗口时刷新父窗口也可以说是关闭子窗口时自动刷新父窗口中的信息，即用户通过window对象的open()方法打开一个新窗口（子窗口），当用户在该子窗口中进行了数据库操作（如数据添加、修改和删除等）之后，关闭子窗口时，系统会自动刷新父窗口来实时更新信息。例如，运行本实例，在网上企业办公自动化系统的会议记录模块中，单击用于显示会议信息列表的会议管理页面中的“录入会议信息”超链接，将弹出会议信息录入页面，在该页面中添加会议信息（会议主题为“关于2009年下半年的工作任务安排”）后，单击“提交”按钮，会议信息将被保存在数据表中，添加会议信息的窗口也将自动关闭，同时系统会自动刷新父窗口（也就是会议列表窗口），这时新添加的会议主题“关于2009年下半年的工作任务安排”，将显示在页面中，如图2.7所示。
图2.7 关闭弹出窗口时刷新父窗口
技术要点
本实例主要应用window.open()语句打开新窗口，并在新窗口中应用opener属性，该属性返回一个引用，用于指定打开本窗口的窗口对象。
语法格式：
window.opener
window.opener.方法
window.opener.属性
功能：返回的是一个窗口对象。opener属性与打开该窗口的父窗口相联系，当访问子窗口中opener属性时，返回的是父窗口，通过该属性，可以使用父窗口对象中的方法和属性。
注意：如果窗口不是由其他窗口打开的，在Netscape中这个属性返回null；在IE中返回“未定义”（undefined）。undefined在一定程度上等于null。需要说明的是，undefined不是JavaScript常数，如果读者企图使用undefined，那就真的返回“未定义”了。
reload()方法相当于单击浏览器上的“刷新”（IE）或“Reload”（Netscape）按钮。
实现过程
（1）制作用于显示会议信息列表的会议管理页面，在该页面中加入空的超链接，并在其单击事件中加入JavaScript脚本，实现打开用于录入会议信息的新窗口，关键代码如下：
<a href="#"
onClick="Javascript:window.open('meeting_add.jsp','','width=560,height=397')">
录入会议信息</a>
（2）制作用于录入会议信息的页面。
（3）制作将会议记录信息保存到数据表中的页面。在该页面中需要根据保存操作的返回值执行不同的操作，当返回值不为0时，将弹出“会议记录保存成功”的对话框并关闭当前窗口，同时刷新父窗口，关键代码如下：
<script language="javascript">
alert("会议记录保存成功！");
window.opener.location.reload(); //刷新父窗口中的网页
window.close(); //关闭当前窗口
</script>
举一反三
根据本实例，读者可以：
实现在办公自动化系统中，打开新的页面添加员工信息后，关闭该页面时刷新父窗口；
在电子商务网站中的后台管理添加商品信息、修改商品信息和删除商品信息时，刷新父窗口。
实例034 关闭IE主窗口时，不出询问对话框
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\02\034
实例说明
通常情况下，当使用JavaScript的window.close()语句关闭IE主窗口时，都会弹出一个“您查看的网页正在试图关闭窗口。是否关闭此窗口？”的询问对话框。在制作网络应用程序时，这种情况是我们不想看到的，那么如何才能屏蔽该对话框呢？本实例将介绍解决该问题的方法。运行本实例，如图2.8所示，单击“关闭系统”超链接后，该IE窗口将被直接关闭。
图2.8 关闭IE主窗口时，不弹出询问对话框
技术要点
本实例主要应用JavaScript的window对象的opener属性将要关闭的IE窗口的打开窗口设置为null，然后再通过window对象的close方法将该窗口关闭，这样就不会弹出询问对话框了。opener属性的详细介绍参见实例033。
实现过程
在实例首页中，添加一个用于关闭窗口的超链接，在该超链接的onClick事件中添加控制窗口关闭的代码，具体代码如下：
<a href="#"onClick="window.opener=null;window.close();">· 关闭系统</a>
举一反三
根据本实例，读者可以：
开发进销存管理系统中的退出系统；
开发办公自动化管理系统中的关闭系统；
开发宽带影院中的打开全屏显示的主窗口。
实例035 弹出带声音的气泡提示窗口
本实例是一个人性化的程序
实例位置：光盘\mingrisoft\02\035
实例说明
在互联网上浏览网页时，经常可能看到在窗口的右下角弹出的气泡提示窗口，显示网站的公告信息或是广告。本实例将介绍如何在JSP网站中弹出带声音提醒的气泡提示窗口。运行本实例，在窗口的右下角将缓慢弹出带警告提示音的气泡提示窗口，显示网站的最新动态，如图2.9所示，单击“明日科技编程词典即将推出”超链接，将打开新窗口显示该动态的详细信息。
图2.9 弹出带声音的气泡提示窗口
技术要点
本实现主要应用HTML DOM中的window对象的createPopup()方法实现创建一个气泡提示窗口。下面将对window对象的createPopup()方法进行详细介绍。
createPopup()方法用于创建一个弹出窗口（pop-up），该窗口和普通窗口一样具有标准窗口所拥有的属性和事件。但是通过该方法创建的窗口对象不能使用父窗口的CSS风格，需要手工重写。createPopup()方法的基本语法如下：
oPopup = window.createPopup()
返回值：
● oPopup Object对象。返回弹出窗口（pop-up）对象。
说明：createPopup()方法为IE 5.5及以上版本提供的方法，IE 5.5以下版本和FireFox浏览器不支持该方法。
实现过程
（1）考虑到代码的可重用性，将实现弹出气泡提示的代码放置在一个单独的JS文件中，在需要弹出的气泡提示的页面中，再引用该文件即可。创建一个名称为remind.js文件。
（2）在JS文件中，创建一个用于弹出气泡提示的类，名称为PopBubble，并且在该类中定义相应的属性，具体代码如下：
function PopBubble(width,height,title,content,foot){
this.content =content; //提示内容
this.title=title; //提示标题
this.foot=foot; //页脚内容
this.width =width?width:200; //设置弹出窗口的宽度
this.height=height?height:120; //设置弹出窗口的高度
this.timeout=150; //设置窗口的停留时间
this.speed =10; //设置窗口的弹出速度
this.step =1; //设置窗口的弹出步幅
this.right =screen.width-1; //设置窗口右边的位置
this.bottom=screen.height; //设置窗口底边的位置
this.left =this.right-this.width; //设置窗口左边的位置
this.top =this.bottom-this.height; //设置窗口顶边的位置
this.timer =0; //计时器
this.pause =false; //标记是否停止收缩
this.close =false; //标记是否关闭
this.autoHide =true; //标记是否自动收缩
}
（2）在JS文件中，编写弹出气泡提示的类的hide方法，该方法用于收缩弹出窗口，具体代码如下：
PopBubble.prototype.hide = function(){
//设置弹出窗口的高度
var offset =this.height>this.bottom-this.top?this.height:this.bottom-this.top;
var obj =this;
if(this.timer>0){
window.clearInterval(obj.timer);
}
var fun = function(){
if(obj.pause==false||obj.close){ //判断是否弹出窗口
var x =obj.left; //获取窗口左边框的位置
var y =0;
var width=obj.width; //获取窗口的宽度
//获取窗口的高度
var height = 0;
if(obj.offset>0){
height = obj.offset;
}
y =obj.bottom-height; //获取窗口顶边框的位置
if(y>=obj.bottom){
window.clearInterval(obj.timer);
obj.Pop.hide(); //收缩窗口
} else {
obj.offset = obj.offset - obj.step;
}
obj.Pop.show(x,y,width,height); //弹出窗口
}
}
this.timer = window.setInterval(fun,this.speed)
}
（3）在JS文件中，编写弹出气泡提示的类的show方法，该方法用于显示带声音提示的弹出窗口，具体代码如下：
PopBubble.prototype.show=function(){
//创建一个顶层窗口对象，该对象只有在IE5.5及以上版本的浏览器中才能使用
var oPopup = window.createPopup();
this.Pop = oPopup;
var w = this.width;
var h = this.height;
this.offset =0;
设置弹出气泡提示窗口的内容及样式。
var str = "<div style='border:#F66B06 1px solid;z-index: 99999; left: 0px; width: " + w + "px; position: absolute; top: 0px;
height: " + h + "px;'>"
str+="<table style='background-image:url(images/pop_title.jpg);background-repeat:no-repeat; cellSpacing=0 cellPadding=0
width='100%' border=0>"
str += "<tr>"
str += "<td width=30 height=24></td>"
str += "<td style='padding-left: 4px; font-weight: normal; font-size: 12px; color: #331C09; padding-top: 4px' vAlign=center
width='100%'>" + this.title + "</td>"
str += "<td style='padding-right: 2px; padding-top: 2px' valign=center align=right width=19>"
str+="<span title=关闭style='font-weight:bold;font-size:12px;cursor:hand;color:#FF4200;margin-right:4px'id='btn_
Close' >×</span></td>"
str += "</tr>"
str += "<tr>"
str += "<td style='padding: 1px' colSpan=3 height=" + (h-28) + ">"
str+="<div style='background-color:#fefff1;padding:8px; font-size:12px; width:100%;height:100%'><a href='javascript:
void(0)' hidefocus=true id='aLink' style='color:#990000'>" + this.content + "</a><br><br>"
tr += "<div style='word-break: break-all' align='right' style='color:#6C6B68'>" + this.foot +"<embed id='soundControl'
src='images/Windows.wav' mastersound hidden='true' loop='0' autostart='true'></embed>"+ "</div>"
str += "</div>"
str += "</td>"
str += "</tr>"
str += "</table>"
str += "</div>"
说明：在上面的代码中，加粗的代码为添加声音提示的代码，该段代码一定要加在最外层的 标记中
将设置好的<div>添加到顶层窗口的body中。
oPopup.document.body.innerHTML = str;
设置顶层窗口的鼠标悬停和移除事件。
var obj =this;
//添加顶层窗口的鼠标悬停事件，在事件中设置窗口不收缩
oPopup.document.body.onmouseover = function(){obj.pause=true;}
//添加顶层窗口的鼠标移除事件，在事件中设置窗口收缩
oPopup.document.body.onmouseout = function(){obj.pause=false;}
根据相应的参数值控制弹出窗口或收缩窗口。
var fun = function(){
var x =obj.left; //获取窗口左边框的位置
var y =0;
var width =obj.width; //获取窗口的宽度
//获取窗口的高度
var height =obj.height;
if(obj.offset>obj.height){
height = obj.height;
} else {
height = obj.offset;
}
//获取窗口顶边框的位置
y =obj.bottom-obj.offset;
if(y<=obj.top){
obj.timeout--;
if(obj.timeout==0){
window.clearInterval(obj.timer);
if(obj.autoHide){
obj.hide(); //收缩窗口
}
}
} else {
obj.offset = obj.offset + obj.step;
}
obj.Pop.show(x,y,width,height); //弹出窗口
}
间隔speed秒后调用fun函数弹出窗口。
this.timer = window.setInterval(fun,this.speed)
单击“关闭”按钮时执行的操作。
oPopup.document.getElementById("btn_Close").onclick = function(){
obj.close = true;
obj.hide(); //收缩窗口
}
单击超链接时执行的操作。
oPopup.document.getElementById("aLink").onclick = function(){
obj.oncommand(); //调用oncommand函数打开查看超链接详细信息的窗口
}
}
（4）在JS文件中，编写设置弹出窗口的左边、右边、顶边和底边框的位置的方法，具体代码如下：
PopBubble.prototype.box = function(left,right,top,bottom){
try {
this.left = left !=null?left:this.right-this.width;
this.right = right!=null?right:this.left +this.width;
this.bottom =bottom!=null?(bottom>screen.height?screen.height:bottom):screen.height;
this.top = top !=null?top:this.bottom - this.height;
} catch(e){}
}
（5）在需要弹出气泡提示的页面中，引用remind.js文件，具体代码如下：
<script language="JavaScript" src="JS/remind.js">
</script>
（6）在需要弹出气泡提示的页面中，通过以下代码调用步骤（1）到步骤（4）所编写的弹出气泡提示的类，弹出带声音的气泡提示窗口。
<script language="javascript">
function loadBubbleTip(){
var content="<%=content%>"; //提示内容
var foot1="<%=date%>"; //日期
var remindMessage = new PopBubble(200,120,"最新动态：",content,foot1);
//设置弹出窗口的左边、右边、顶边和底边框的位置
remindMessage.box(null,null,null,screen.height-30);
remindMessage.speed =10; //设置窗口的弹出速度
remindMessage.step =2; //设置窗口的弹出步幅
remindMessage.show(); //弹出窗口
PopBubble.prototype.oncommand = function(){
window.open("detail.jsp","","width=300,height=150,scrollbars=1");
this.close = true;
this.hide(); //收缩窗口
}
}
window.onload=function(){
loadBubbleTip();
}
</script>
举一反三
根据本实例，读者可以：
在备忘录中添加带声音的气泡提示窗口；
制作新闻网中弹出气泡提示窗口显示即时新闻。