JavaScrip高级应用：操作模态与非模态对话框.docVIP

JavaScrip高级应用：操作模态与非模态对话框 我们知道，对话框一般分为两种类型：模态类型（modal）与非模态类型（modeless）。所谓模态对话框，就是指除非采取有效的关闭手段，用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性，用户可以在当前对话框以及其他窗口间进行切换。本文介绍如何使用JavaScript语言来创建这两种类型的对话框、控制其大小和位置、改变其外观以及在对话框间的数据传递。 本文的所有例程中，从层次上涉及到2个HTML页面。我们把第一个页面叫做caller页面，第二个页面叫做callee页面。也就是说，在caller页面执行代码创建生成callee页面。 一、创建模态和非模态对话框 首先，我们举个例子来快速了解一下什么是模态与非模态。在caller.htm中，我们输入以下代码： INPUT TYPE=button VALUE=创建模态对话框 onclick=fnOpenModal() brbr INPUT TYPE=button VALUE=创建非模态对话框 onclick=fnOpenModeless() script language=javascript function fnOpenModal(){ window.showModalDialog(callee.htm) } function fnOpenModeless(){ window.showModelessDialog(callee.htm) } /script 在浏览器中打开caller.htm，点击“创建模态对话框”按钮，将会出现一个对话框窗口，其中的内容是callee.htm。你会看到，除了关闭这个新窗口，无论怎样我们也不能将其他的窗口设置为“当前活动”窗口，这个一直是活动状态的窗口类型就是模态类型。关闭这个模态对话框，回到caller.htm页面，点击“创建非模态对话框”，出现一个包含callee.htm页面的对话框窗口。这回有所不同，鼠标可以转移到其他地方使另外的窗口成为“当前活动”状态，这就是非模态的概念。 接下来，我们看看创建模态对话框与非模态对话框的相关语法： 创建模态对话框： vReturnValue = window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]); 创建非模态对话框： vReturnValue = window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]); 从上面的语法我们得知：除了名字有所区别外，参数种类与含义都相同。以下是各参数的含义： · VReturnValue：对于showModalDialog()，它表示被打开的对话框窗口设置的returnValue属性值。对于showModelessDialog()，它表示新窗口对象。? · VFreeArgument：这个参数可用于传递某种类型的数据到打开的对话框，数据可以是一个数值、字符串、数组或者一个对象类型。在新窗口中引用这个数值时，可通过新创建window对象的dialogArguments 属性。? · SOrnaments：用这个参数指定新窗口的外观。可选择的窗口属性有很多种，当有多种控制需求时，将相关内容用一个字符串连接起来，其间用分号隔开。以下是可选择的属性种类：? o dialogHeight: sHeight? o dialogLeft: sXpos? o dialogTop: sYpos? o dialogWidth: sWidth? o center: ( yes | no | 1 | 0 | on | off )? o dialogHide: ( yes | no | 1 | 0 | on | off )? o edge: ( sunken | raised )? o help: ( yes | no | 1 | 0 | on | off )? o resizable: ( yes | no | 1 | 0 | on | off )? o scroll: ( yes | no | 1 | 0 | on | off )? o status: ( yes | no | 1 | 0 | on | off )? 除了以上属性外，我们还可以加入更加丰富的CSS控制。 以下我们来详细解释如何应用这些属性。 二、控制对话框大小和位置 控制对话框的大小和位置涉及到5个方面：高度（dialogHeight）、宽度（dialogWidth）、相对于桌面左上角的x坐标（dialogLeft）、y坐标（dia