2.2 弹出网页对话框
这里所说的网页对话框是指通过指定的脚本代码打开一个新的窗口，并且该窗口可以有返回值，网页对话框可以分为网页模式对话框和网页非模式对话框。下面将通过具体实例介绍网页对话框在JSP中的应用。
实例036 弹出网页模式对话框
本实例是一个提高网站安全性的程序
实例位置：光盘\mingrisoft\02\036
实例说明
在制作办公自动化系统时，通常都少不了发送内部邮件的功能。为了方便用户快速将邮件发送到指定人的手中，防止因收件人用户名写错而发送失败，可以将公司内全部员工的用户名显示在下拉列表中，但是，如果公司内部的人员众多，这样也不是很方便，因为下拉列表不能分栏显示。为了解决该问题，笔者想到了一个比较不错的方法，那就是将用户名分栏显示在网页对话框中。运行本实例，单击“选择用户”按钮，即可弹出显示用户名列表的网页对话框，如图2.10所示。这时用户单击选中的用户名之后，该网页对话框关闭，与此同时，选择的用户也被添加到“收件人”文本框中。
图2.10 弹出网页模式对话框
技术要点
本实例主要应用window对象的showModalDialog() 方法，该方法用于弹出网页（模式）对话框，其语法格式如下：
variant = object.showModalDialog(sURL [, vArguments [, sFeatures]])
参数说明：
● sURL：指定URL文件地址。
● vArguments：用于向网页对话框传递参数，传递参数的类型不限制，对于字符串类型，最大为4096字符，也可以传递对象，例如index.htm。
● sFeatures：可选项，窗口对话框的设置参数，主要参数如表2.4所示。
表2.4 参数说明
实现过程
（1）制作发送邮件的页面，在该页面中添加一个名称为toname的“收件人”文本框和一个“选择用户”按钮，在该按钮的onClick事件中调用自定义JavaScript函数opendialog()，关键代码如下：
<input name="toname" type="text" class="Sytle_text" id="toname">
<input name="Submit1"type="button"value="选择用户"class="Style_button_del" onClick="opendialog()">
（2）编写自定义JavaScript函数opendialog()，用于打开网页对话框并将网页对话框返回的值赋给“收件人”文本框，代码如下：
<script language="javascript">
function opendialog(){
var someValue=window.showModalDialog("optUser.jsp","","dialogWidth=407px;dialogHeight= 257px; status=no;help=no;
scrollbars=no") //获取网页对话框的返回值
document.form1.toname.value=someValue; //将获取的网页对话框返回值赋给“收件人”文本框
}
</script>
（3）制作显示用户名列表的页面optUser.jsp，在该页面中应用循环语句将用户名分栏显示，并将选择的用户名返回到发送邮件页面，同时关闭该网页对话框的超级链接，完整代码如下：
<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" %>
<jsp:useBean class="com.core.ConnDB" id="conn" scope="page"/>
<% ResultSet rs=conn.executeQuery("SELECT UserName,branch FROM tb_User"); %>
<html>
<head>
<title>弹出网页模式对话框</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link href="style.css" rel="stylesheet">
</head>
<body>
<table width="400" height="229" border="0" cellpadding="0" cellspacing="0" background="images/bbs_add.gif">
<tr> <td width="400" valign="top"><br><br><br>
<table width="80%"height="77" border="0"align="center"cellpadding="0"cellspacing="0">
<tr><td height="13"></td></tr>
<%while(rs.next()){
if(rs.getRow()%2==1){
%>
<script language="javascript">
function action(user){
parent.window.returnValue=user;
window.close();
}
</script>
<tr>
<td height="25" valign="top"><a href="#"
onClick="action('<%=rs.getString("UserName")%>')"><%=rs.getString("UserName")%> [<%=rs.getString("branch")%>]</a></td>
<%}else{%>
<td height="25" valign="top"><a href="#"
onClick="action('<%=rs.getString("UserName")%>')"><%=rs.getString("UserName")%> [<%=rs.getString("branch")%>]</a></td>
</tr>
<%}
}%>
</table>
</td>
</tr>
</table>
</body>
</html>
举一反三
根据本实例，读者可以：
在编写人力资源管理系统时，为员工指定所属部门；
在编写校园管理系统时，弹出网页对话框选择班级或专业；
在客房预订系统中，弹出网页对话框选择客户信息。
实例037 弹出全屏显示的网页（模式）对话框
本实例是一个提高网站安全性的程序
实例位置：光盘\mingrisoft\02\037
实例说明
在设计网页时，对于一些只有指定用户才可以看到的信息，可以将其以全屏显示的网页（模式）对话框展示给用户，这样可以保证用户看后能及时将其关闭。例如，在明日科技编程词典网站中的“在线订购”就是只有登录用户才可以查看的。用户登录后，“在线订购”超链接方可使用，单击“在线订购”超链接，即可进入图2.11所示的“在线订购”页面，这时的“在线订购”页面是全屏网页（模式）对话框进行显示的，用户只有关闭该页面后，才可以查看网站的其他内容。
图2.11 弹出全屏显示的网页（模式）对话框
技术要点
本实例主要应用了screen对象的width、height属性和window对象的showModalDialog()方法，在实例036中已经介绍了screen对象和window对象的showModalDialog()方法，这里不再赘述。其实还有一种方法也可以打开网页对话框，即showModelessDialog()方法。
使用showModalDialog()方法与showModelessDialog()方法的区别在于showModalDialog()方法打开的网页对话框为模式窗口，置在父窗口上，必须关闭才能访问父窗口；而showModelessDialog()方法打开的对话框为无模式窗口，打开后不必关闭也可以访问父窗口或其他窗口。
实现过程
（1）创建提供“在线订购”超链接的页面，在该页面中添加空的超链接，在该超链接的onClick事件中调用自定义JavaScript函数opendialog()。关键代码如下：
<a href="#" onClick="opendialog()">在线订购</a>
（2）编写自定义JavaScript函数opendialog()，用于打开全屏显示的网页对话框，代码如下：
<script language="javascript">
function opendialog(){
var width=screen.width; //获取屏幕的宽度
var height=screen.height; //获取屏幕的高度
window.showModalDialog("notice.jsp","","dialogWidth="+width+"px;dialogHeight="+height+ "px;status= no;help=no;
scrollbars=no")
}
</script>
举一反三
根据本实例，读者可以：
弹出网站后台管理员登录窗口；
当用户执行非法操作后，弹出一个大大的警告框。
实例038 网页拾色器
本实例是一个美化界面、简化操作的程序
实例位置：光盘\mingrisoft\02\038
实例说明
在动态网站中，经常会有允许用户在客户端应用自定义颜色显示某些信息的情况，如留言文字的颜色。这可以通过在网页中加入一个网页拾色器来实现。运行本实例，单击页面中的颜色块，将打开网页拾色器，如图2.12所示，当鼠标指针移动到指定色块时，将显示该色块的颜色值；当用户单击指定色块时，就会关闭网页拾色器，并将选择的颜色设置为颜色块的背景色。
图2.12 网页拾色器
技术要点
在本实例中仅使用216种浏览器安全的颜色，即所谓Netscape色块。这216种颜色分别代表0、51、102、153和204这5个颜色值以及每一种原色（即红、绿、蓝）。这些十进制数对应的十六进制数分别为0x00、0x33、0x66、0x99、0xCC和0xFF。在HTML的颜色属性中，黑色是#000000，纯红色是#FF0000，纯绿色就是#00FF00，纯蓝色是#0000FF，而白色则是#FFFFFF。在实现网页拾色器功能时，需要应用JavaScript的数组。创建数组有以下3种方法。
（1）无参数调用。语法格式如下：
var h = new Array();
（2）指定数组前n个元素的值。语法格式如下：
var h = new Array(arglist);
其中参数arglist是一个用逗号隔开的值，这些值用于给Variant所包含的数组的各元素赋值。如果不提供参数，则创建一个长度为0的数组。
（3）指定数组中的元素个数。语法格式如下：
var h = new Array(n);
其中参数n是指定数组的长度。由于在JavaScript中，数组的第一个元素的下标值为0，所以n的值为数组的最大下标值加1。
注意：没有作为数组声明的Variant也可以表示数组。除了长度固定的字符串以及用户定义类型之外，Variant变量可以表示任何类型的数组。尽管一个包含数组的Variant和一个元素为Variant类型的数组在概念上有所不同，但对数组元素的访问方式是相同的。
实现过程
（1）创建需要调用网页拾色器的页面，在该页面中添加一个文本框，将文本框设置为只读，同时将文本框的背景颜色设置为黑色，并在该文本框的onClick事件中调用自定义的JavaScript函数colorpick()，代码如下：
<input name="color" type="text" id="color" size="3" readonly="yes" style="background-color:#000000" onClick="colorpick(this);">
（2）编写自定义的JavaScript函数colorpick()，用于打开网页对话框调用网页拾色器，并用网页拾色器的返回值设置文本框的背景颜色，代码如下：
<script language="javascript">
function colorpick(field){
var rtn = window.showModalDialog("color.jsp","","dialogWidth:220px;dialogHeight:200px;status:no;help:no;scrolling=no;
scrollbars=no");
if(rtn!=null)
field.style.background=rtn;
return;
}
</script>
（3）制作网页拾色器页面color.jsp，关键代码如下：
<script language="JavaScript">
var h = new Array(6)
h[0] = "FF";
h[1] = "CC";
h[2] = "99";
h[3] = "66";
h[4] = "33";
h[5] = "00";
function action(RGB) {
parent.window.returnValue="#"+RGB; //设置窗口的返回值
window.close(); //关闭当前窗口
}
function Mcell(R,G,B){ //输出单元格的内容
document.write('<td bgcolor="#' + R + G + B + '">');
document.write('<a href="#" onClick="action(\'' + (R + G + B) + '\')">');
document.write('<img border=0 height=12 width=12 \')" alt=\'#'+R+G+B+'\'>');
document.write('</a>');
document.write('</td>');
}
function Mtr(R,B){ //输出表格的行
document.write('<tr>');
for (var i = 0; i < 6; ++i) {
Mcell(R, h[i], B);
}
document.write('</tr>')
}
function Mtable(B){ //输出表格的内容
document.write('<table cellpadding=0 cellspacing=0 border=0>');
for (var i = 0; i < 6; ++i) {
Mtr(h[i], B);
}
document.write('</table>');
}
function Mcube() {
document.write('<table cellpadding=0 cellspacing=0 border=0><tr>');
for (var i = 0; i < 6; ++i) {
if(i%3==0){
document.write('<tr>');
}
document.write('<td bgcolor="#FFFFFF">');
Mtable(h[i])
document.write('</td>');
}
if(i%3==0){
document.write('</tr>');
}
document.write('</tr></table>');
}
Mcube()
</script>
举一反三
根据本实例，读者可以：
实现具有UBB功能的在线论坛；
实现网站聊天室的功能；
实现网页换肤的功能。
实例039 日期选择器
本实例是一个提高效率、简化操作的程序
实例位置：光盘\mingrisoft\02\039
实例说明
在动态网站的人机交互页面中，经常会遇到要求用户输入日期的情况，如果让用户手动输入，不但操作不方便，而且日期格式不好控制。为了解决此问题，可以在页面中加入日期选择器。运行本实例，单击“售货日期”文本框，将弹出具有日期选择功能的网页对话框，如图2.13所示。当用户单击需要的日期后，该网页对话框将关闭，并将选择结果填入“售货日期”文本框中。
图2.13 日期选择器
技术要点
本实例主要应用window对象的showModalDialog() 方法实现，关于showModalDialog() 方法的详细介绍，读者可参见实例036。
实现过程
（1）创建需要调用日期选择器的页面，在该页面中添加一个文本框，在该文本框的onClick事件中调用自定义的JavaScript函数loadCalendar()，代码如下：
<input name="startD" type="text" id="startD" onClick="loadCalendar(this)">
（2）编写自定义的JavaScript函数loadCalendar()，用于打开网页对话框调用日期选择器，代码如下：
<script language="javascript">
function loadCalendar(field){
var rtn = window.showModalDialog("calendar.jsp","","dialogWidth:290px;dialogHeight:250px;status:no;help:no; scrolling=no;
scrollbars=no");
if(rtn!=null)
field.value=rtn; //设置返回值
return;
}
</script>
（3）制作日期选择器页面calendar.jsp。首先，添加两个下拉列表，用于选择要显示的年份和月份，然后制作一个7行、7列的表格，其中最顶行用于标记星期，其他行显示日期，显示日期的部分主要通过两层嵌套的For循环语句实现，关键代码如下：
<table border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#82664F" height="18">
<td width="31" align="center" nowrap="nowrap"><font color="#FF0000">日</font></td>
<td width="31" align="center" nowrap="nowrap">一</td>
<td width="31" align="center" nowrap="nowrap">二</td>
<td width="31" align="center" nowrap="nowrap">三</td>
<td width="31" align="center" nowrap="nowrap">四</td>
<td width="31" align="center" nowrap="nowrap">五</td>
<td width="31" align="center" nowrap="nowrap">六</td>
</tr>
<%for(int r=0;r<6;r++){%>
<tr bgcolor="#FFFFFF" height="18">
<%for(int d=0;d<7;d++){%>
<td align="center"><input type="text" size="2" name="dayBox" readOnly onClick="javascript:Check
Date(this.value);"onMouseOver="this.style.background='#EEEEEE'" onmouseout="this.style.background='white'">
</td>
<%}%>
</tr>
<%}%>
</table>
（4）最后，编写实现日期选择功能的JavaScript代码，限于篇幅，具体代码可参见光盘。
举一反三
根据本实例，读者可以：
开发企业进销存管理系统中的数据查询模块；
开发电子商务管理系统中的订单查询模块；
开发用户注册模块中的生日选择功能。