弹出窗口（对话框）

对话框分为三种：

window.open方法

无模式对话框

有模式对话框

第一：OPEN方法

function open_cate()

{

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");

}

</script>

这种方法打开浏览器的一个新实例，通常加载某个特定 URL 指定的文档。定位已经打开的窗口的特定的已命名实例是可能的，这样您就可以避免打开新的窗口，而是使用您以前打开的现有窗口用于另一个目的。详细信息，请参见 Web Workshop 中的 open（英文）方法。通过打开浏览器的另外一个实例，用户可以在打开的窗口中自由地进行切换。您可以使用 window.open 的一个情况就是一个电子邮件应用程序，它允许用户在一个另外的窗口中打开一条电子邮件消息，同时又保持与原窗口中的消息列表的完全交互操作。

父窗口向弹出窗口传递信息
window.open的第一个参数为URL，我们可以把参数加在URL后，例如'OpenUp.aspx?parm1=abc&parm2=<%=serversideparm%>'。这样，只需在弹出窗口QueryString到这些参数，就实现了动态向弹出窗口传递信息。
将弹出窗口的信息传回父窗口
使用弹出传口的目的主要是为了同用户的交互，所以如何在父页面中得到用户对弹出窗口的操作结果是非常重要的。其实这里实现的方法也很简单，同样是通过JavaScript：通过window.opener得到父窗口的window对象，就可以对父窗口进行操作，比如对某个TextBox设值。
心得：

当初为了实现这个简单的交互操作，花费了整整一下午的时间，关键是对JavaScript太生疏，自以为做Server端的东西才是本事，其实是犯了大错。

另外，如果在Js中引用.net Server端对象遇到对象为空的报错时，很有可能是对象在编译后，VS对控件进行了重命名。一开始这里不知道，害得我好苦

第二：无模式对话框：无模式对话框允许用户在对话框打开的同时与原窗口进行交互操作。在这种情况中，对话框保持在浏览器的上面并处于禁用状态。如果用户从原始文档中移开进行其它浏览，则无模式对话框将被自动关闭，因为该对话框的所有上下文已经丧失。高级搜索功能可以很好地使用这样的对话框，以便使用户可以选择文档中找到的文本，同时使对话框保持打开的状态，这样用户就可以迅速地前进到已找到文本的下一个实例。
第三：有模式对话框：有模式对话框常使程序可以使用户完全集中于某一特定的对话框，并要求在继续进行之前与其进行交互操作。这种情况的一个示例就是数据输入操作，在该操作中，必须输入某些数据后应用程序才能继续。

<HTML>

<BODY>

This page will invoke my DHTML dialog box when the button is clicked.

<BR>

</BODY>

</HTML>

<HTML>

This is some content for my DHTML dialog box.

<BR>

</BODY>

</HTML>

dialog1.htm 文件在单击按钮时执行 showModalDialog 方法，并将第二个文件 dcontent1.htm 用作对话框的内容。dcontent1.htm 文件具有一些 HTML 内容和一个 OK 按钮，单击该按钮时会将对话框关闭。注意对话框是如何带着一个状态条出现的。它可以通过对函数的可选 sFeatures 参数的值进行操作而去除。尝试改变一下各参数的值，这可以显示对话框的不同样式。例如，您可以更改 dialog1.htm 中的方法调用去除状态条并调整对话框的大小。

showModalDialog('dcontent1.htm','','status:no;resizable:yes');

现在，将方法由 showModalDialog 改为 showModelessDialog，并查看无模式对话框怎样允许用户与对话框下面的文档进行交互操作。您可以在 Web Workshop 的 DHTML 参考（英文）一节中查看关于所有对话框设置的完整说明。

<HTML>

<HEAD>

</HEAD>

function doDialog()

{

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.

</BODY>

</HTML>

<HTML>

This is some content for my DHTML dialog box.

<input type='button' onclick="returnValue=true;window.close();" value=" OK "> &nbsp&nbsp&nbsp

</BODY>

</HTML>

dialog2.htm 文件调用 DHTML 对话框，后者将 dcontent2.htm 文件用作其内容。输入元素的值被传递到对话框中，对话框使用该值显示内容。返回值根据用户对 OK 或 Cancel 的选择进行设置。

在无模式对话框的情形中，返回值则有所不同。对话框将被显示，但调用 showModelessDialog 的代码将继续运行。对于无模式对话框，来自 showModelessDialog 的返回值为 DHTML 对话框中包含的文档的 window 对象，它可以随后用于与打开的对话框进行通信。我们来看一下下面的无模式对话框的示例。在该示例中，在主页面设置一个值可以影响到打开的对话框，并且在对话框中设置一个值也可以影响到主页面。

<HTML>

<HEAD>

</HEAD>

var dWin=null;

function doDialog()

{

dWin=showModelessDialog('dcontent3.htm',window,'status:no;resizable:yes');

}

function setDialogValue()

{

if (dWin != null)

{

dWin.d1.innerHTML=ip1.value;

}

</SCRIPT>

<BODY>

This page will invoke my DHTML dialog box when the button is clicked.

</BODY>

</HTML>

<HTML>

function window.onunload()

{

dialogArguments.dWin=null;

}

</SCRIPT>

This is some content for my DHTML dialog box.

<input type='button' onclick="dialogArguments.d1.innerHTML=ip1.value;" value=" Apply "> &nbsp&nbsp&nbsp

&nbsp&nbsp&nbsp

</BODY>

</HTML>

function fnRandom(iModifier){

return parseInt(Math.random()*iModifier);

}

function fnSetValues(){

var iHeight=oForm.oHeight.options[oForm.oHeight.selectedIndex].text;

if(iHeight.indexOf("Random")>-1){

iHeight=fnRandom(document.body.clientHeight);

}

var iWidth=oForm.oWidth.options[oForm.oWidth.selectedIndex].text;

if(iWidth.indexOf("Random")>-1){

iWidth=fnRandom(document.body.clientWidth);

}

var iTop=oForm.oTop.options[oForm.oTop.selectedIndex].text;

if(iTop.indexOf("Random")>-1){

iTop=fnRandom(screen.height);

}

var iLeft=oForm.oLeft.options[oForm.oLeft.selectedIndex].text;

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;

}

function fnOpen(){

/* 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>

posted on 2006-03-07 15:22 mjgforever 阅读(1375) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

毛毛的小窝 — 关注技术交流、让我们一起成长

导航

公告