对话框分为三种:
window.open方法
无模式对话框
有模式对话框
第一:OPEN方法
<
script
>
function
open_cate()
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
{
window.open("OpenUp.aspx","","toolbar=0,location=0,directories=0,status=0,
menubar=0,scrollbars=1,resizable=0,left=200,top=100,width=250,height=400");
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
}
</
script
>
这种方法打开浏览器的一个新实例,通常加载某个特定 URL 指定的文档。定位已经打开的窗口的特定的已命名实例是可能的,这样您就可以避免打开新的窗口,而是使用您以前打开的现有窗口用于另一个目的。详细信息,请参见 Web Workshop 中的
open(英文)方法。通过打开浏览器的另外一个实例,用户可以在打开的窗口中自由地进行切换。您可以使用 window.open 的一个情况就是一个电子邮件应用程序,它允许用户在一个另外的窗口中打开一条电子邮件消息,同时又保持与原窗口中的消息列表的完全交互操作。
父窗口向弹出窗口传递信息
window.open的第一个参数为URL,我们可以把参数加在URL后,例如'OpenUp.aspx?parm1=abc&parm2=<%=serversideparm%>'。这样,只需在弹出窗口QueryString到这些参数,就实现了动态向弹出窗口传递信息。
将弹出窗口的信息传回父窗口
使用弹出传口的目的主要是为了同用户的交互,所以如何在父页面中得到用户对弹出窗口的操作结果是非常重要的。其实这里实现的方法也很简单,同样是通过JavaScript:通过window.opener得到父窗口的window对象,就可以对父窗口进行操作,比如对某个TextBox设值。
心得:
<!--
dcontent1.htm:
-->
![None.gif](/Images/OutliningIndicators/None.gif)
<
HTML
>
<
BODY
style
="background-color:lightblue;margin:10;"
>
This is some content for my DHTML dialog box.
<
BR
>
<
BR
>
<
input
type
='button'
onclick
="window.close();"
value
=" OK "
>
</
BODY
>
</
HTML
>
![None.gif](/Images/OutliningIndicators/None.gif)
dialog1.htm 文件在单击按钮时执行 showModalDialog 方法,并将第二个文件 dcontent1.htm 用作对话框的内容。dcontent1.htm 文件具有一些 HTML 内容和一个 OK 按钮,单击该按钮时会将对话框关闭。注意对话框是如何带着一个状态条出现的。它可以通过对函数的可选 sFeatures 参数的值进行操作而去除。尝试改变一下各参数的值,这可以显示对话框的不同样式。例如,您可以更改 dialog1.htm 中的方法调用去除状态条并调整对话框的大小。
showModalDialog('dcontent1.htm','','status:no;resizable:yes');
现在,将方法由 showModalDialog 改为 showModelessDialog,并查看无模式对话框怎样允许用户与对话框下面的文档进行交互操作。您可以在 Web Workshop 的 DHTML 参考(英文)一节中查看关于所有对话框设置的完整说明。
<!--
dialog2.htm
-->
![None.gif](/Images/OutliningIndicators/None.gif)
<
HTML
>
<
HEAD
>
</
HEAD
>
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
SCRIPT
>
function doDialog()
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
var x=showModalDialog('dcontent2.htm',ip1.value,'status:no;resizable:yes');
d1.innerHTML="The dialog box return value was: " + x;
}
</
SCRIPT
>
<
BODY
>
This page will invoke my DHTML dialog box when the button is clicked.
<
BR
><
BR
>
<
INPUT
type
=text
id
=ip1
value
='input
content'
>
<
BR
><
BR
>
<
input
type
='button'
onclick
="doDialog()"
value
="Create Dialog"
>
<
BR
><
BR
>
<
DIV
id
=d1
></
DIV
>
</
BODY
>
</
HTML
>
![None.gif](/Images/OutliningIndicators/None.gif)
<!--
dcontent2.htm
-->
![None.gif](/Images/OutliningIndicators/None.gif)
<
HTML
>
<
BODY
style
="background-color:lightblue;margin:10;"
onload
="d1.innerHTML=dialogArguments;"
>
This is some content for my DHTML dialog box.
<
BR
><
BR
>
<
DIV
id
=d1
></
DIV
>
<
BR
><
BR
>
<
input
type
='button'
onclick
="returnValue=true;window.close();"
value
=" OK "
>
   
<
input
type
='button'
onclick
="returnValue=false;window.close();"
value
=" Cancel "
>
</
BODY
>
</
HTML
>
![None.gif](/Images/OutliningIndicators/None.gif)
dialog2.htm 文件调用 DHTML 对话框,后者将 dcontent2.htm 文件用作其内容。输入元素的值被传递到对话框中,对话框使用该值显示内容。返回值根据用户对 OK 或 Cancel 的选择进行设置。
在无模式对话框的情形中,返回值则有所不同。对话框将被显示,但调用 showModelessDialog 的代码将继续运行。对于无模式对话框,来自 showModelessDialog 的返回值为 DHTML 对话框中包含的文档的 window 对象,它可以随后用于与打开的对话框进行通信。我们来看一下下面的无模式对话框的示例。在该示例中,在主页面设置一个值可以影响到打开的对话框,并且在对话框中设置一个值也可以影响到主页面。
<!--
dialog3.htm
-->
![None.gif](/Images/OutliningIndicators/None.gif)
<
HTML
>
<
HEAD
>
</
HEAD
>
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
SCRIPT
>
var dWin=null;
function doDialog()
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
dWin=showModelessDialog('dcontent3.htm',window,'status:no;resizable:yes');
}
![InBlock.gif](/Images/OutliningIndicators/InBlock.gif)
function setDialogValue()
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
if (dWin != null)
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
dWin.d1.innerHTML=ip1.value;
}
}
</
SCRIPT
>
<
BODY
>
This page will invoke my DHTML dialog box when the button is clicked.
<
BR
><
BR
>
<
INPUT
type
=text
id
=ip1
value
='input
content'
>
<
BR
><
BR
>
<
input
type
='button'
onclick
="setDialogValue();"
value
="Set Dialog Value"
>
<
BR
><
BR
>
<
input
type
='button'
onclick
="doDialog();"
value
="Create Dialog"
>
<
BR
><
BR
>
<
DIV
id
=d1
></
DIV
>
</
BODY
>
</
HTML
>
![None.gif](/Images/OutliningIndicators/None.gif)
<!--
dcontent3.htm
-->
![None.gif](/Images/OutliningIndicators/None.gif)
<
HTML
>
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
<
SCRIPT
>
function window.onunload()
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](/Images/OutliningIndicators/ContractedSubBlock.gif)
{
dialogArguments.dWin=null;
}
</
SCRIPT
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
BODY
style
="background-color:lightblue;margin:10;"
>
This is some content for my DHTML dialog box.
<
BR
><
BR
>
<
DIV
id
=d1
></
DIV
>
<
BR
><
BR
>
<
input
type
='text'
id
=ip1
onclick
='dialogArguments.d1.innerHTML=ip1.value;'
>
<
BR
><
BR
>
<
input
type
='button'
onclick
="dialogArguments.d1.innerHTML=ip1.value;"
value
=" Apply "
>
   
<
input
type
='button'
onclick
="dialogArguments.d1.innerHTML=ip1.value;window.close();"
value
=" OK "
>
   
<
input
type
='button'
onclick
="window.close();"
value
=" Cancel "
>
![None.gif](/Images/OutliningIndicators/None.gif)
</
BODY
>
</
HTML
>
![None.gif](/Images/OutliningIndicators/None.gif)
<
SCRIPT
>
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
fnRandom(iModifier)
{
return parseInt(Math.random()*iModifier);
}
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
fnSetValues()
{
var iHeight=oForm.oHeight.options[oForm.oHeight.selectedIndex].text;
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(iHeight.indexOf("Random")>-1)
{
iHeight=fnRandom(document.body.clientHeight);
}
var iWidth=oForm.oWidth.options[oForm.oWidth.selectedIndex].text;
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(iWidth.indexOf("Random")>-1)
{
iWidth=fnRandom(document.body.clientWidth);
}
var iTop=oForm.oTop.options[oForm.oTop.selectedIndex].text;
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(iTop.indexOf("Random")>-1)
{
iTop=fnRandom(screen.height);
}
var iLeft=oForm.oLeft.options[oForm.oLeft.selectedIndex].text;
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
if(iLeft.indexOf("Random")>-1)
{
iLeft=fnRandom(screen.width);
}
var sEdge=oForm.oEdge.options[oForm.oEdge.selectedIndex].text;
var bCenter=oForm.oCenter.options[oForm.oCenter.selectedIndex].text;
var bHelp=oForm.oHelp.options[oForm.oHelp.selectedIndex].text;
var bResize=oForm.oResize.options[oForm.oResize.selectedIndex].text;
var bStatus=oForm.oStatus.options[oForm.oStatus.selectedIndex].text;
var sFeatures="dialogHeight: " + iHeight + "px; dialogWidth: " + iWidth + "px; dialogTop: " + iTop + "px; dialogLeft: " + iLeft + "px; edge: " + sEdge + "; center: " + bCenter + "; help: " + bHelp + "; resizable: " + bResize + "; status: " + bStatus + ";";
return sFeatures;
}
![ExpandedBlockStart.gif](/Images/OutliningIndicators/ExpandedBlockStart.gif)
function
fnOpen()
{
![ExpandedSubBlockStart.gif](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
/**//* The method constructor looks like:
showModalDialog(
sURL="The page that is opened"
sArguments="Extra values or object references"
sFeatures="features of the window";
)
*/
var sFeatures=fnSetValues();
oFeatures.innerHTML='window.showModalDialog("SMD_target.htm","' + oForm.oArguments.value + '","' + sFeatures + '");';
window.showModalDialog("SMD_target.htm", oForm.oArguments.value, sFeatures)
}
</
SCRIPT
>