点击这里 点"> 弹出窗口(对话框) - 11GX
首页 > 弹出窗口(对话框)

弹出窗口(对话框)

对话框分为三种:

window.open方法

无模式对话框

有模式对话框  

 

第一:OPEN方法

None.gif<script>

None.gif
function open_cate()

ExpandedBlockStart.gifContractedBlock.gif
{

InBlock.gif    window.open(
"OpenUp.aspx","","toolbar=0,location=0,directories=0,status=0,

InBlock.gif                menubar=0,scrollbars=1,resizable=0,left=200,top=100,width=250,height=400
");

InBlock.gif

ExpandedBlockEnd.gif}


None.gif
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对控件进行了重命名。一开始这里不知道,害得我好苦



第二:无模式对话框:无模式对话框允许用户在对话框打开的同时与原窗口进行交互操作。在这种情况中,对话框保持在浏览器的上面并处于禁用状态。如果用户从原始文档中移开进行其它浏览,则无模式对话框将被自动关闭,因为该对话框的所有上下文已经丧失。高级搜索功能可以很好地使用这样的对话框,以便使用户可以选择文档中找到的文本,同时使对话框保持打开的状态,这样用户就可以迅速地前进到已找到文本的下一个实例。

第三:有模式对话框:有模式对话框常使程序可以使用户完全集中于某一特定的对话框,并要求在继续进行之前与其进行交互操作。这种情况的一个示例就是数据输入操作,在该操作中,必须输入某些数据后应用程序才能继续。

None.gif<HTML>

None.gif
<BODY>

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

None.gif
<BR>

None.gif
<input type='button' onclick="showModalDialog('dcontent1.htm');" value="Create Dialog">

None.gif
BODY>

None.gif
HTML>
None.gif

None.gif

None.gif
<HTML>

None.gif
<BODY style="background-color:lightblue;margin:10;">

None.gifThis is some content for my DHTML dialog box.

None.gif
<BR>

None.gif
<BR>

None.gif
<input type='button' onclick="window.close();" value=" OK ">

None.gif
BODY>

None.gif
HTML>

None.gif

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 参考(英文)一节中查看关于所有对话框设置的完整说明。

None.gif

None.gif

None.gif
<HTML>

None.gif
<HEAD>

None.gif
HEAD>

ExpandedBlockStart.gifContractedBlock.gif
<SCRIPT>dot.gif

InBlock.gif
function doDialog()

ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{

InBlock.gif  
var x=showModalDialog('dcontent2.htm',ip1.value,'status:no;resizable:yes');

InBlock.gif  d1.innerHTML
="The dialog box return value was: " + x;

ExpandedBlockEnd.gif}


None.gif
SCRIPT>

None.gif
<BODY>

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

None.gif
<BR><BR>

None.gif
<INPUT type=text id=ip1 value='input content'>

None.gif
<BR><BR>

None.gif
<input type='button' onclick="doDialog()" value="Create Dialog">

None.gif
<BR><BR>

None.gif
<DIV id=d1>DIV>

None.gif
BODY>

None.gif
HTML>

None.gif

None.gif


None.gif

None.gif
<HTML>

None.gif
<BODY style="background-color:lightblue;margin:10;"   onload="d1.innerHTML=dialogArguments;">

None.gifThis is some content for my DHTML dialog box.

None.gif
<BR><BR>

None.gif
<DIV id=d1>DIV>

None.gif
<BR><BR>

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

None.gif
<input type='button' onclick="returnValue=false;window.close();" value=" Cancel ">

None.gif
BODY>

None.gif
HTML>

None.gif

None.gif

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

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

None.gif

None.gif

None.gif
<HTML>

None.gif
<HEAD>

None.gif
HEAD>

ExpandedBlockStart.gifContractedBlock.gif
<SCRIPT>dot.gif

InBlock.gif
var dWin=null;

InBlock.gif
function doDialog()

ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{

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

ExpandedSubBlockEnd.gif}


InBlock.gif

InBlock.gif
function setDialogValue()

ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{

InBlock.gif  
if (dWin != null)

ExpandedSubBlockStart.gifContractedSubBlock.gif  
dot.gif{

InBlock.gif   dWin.d1.innerHTML
=ip1.value;

ExpandedSubBlockEnd.gif  }


ExpandedBlockEnd.gif}


None.gif
SCRIPT>

None.gif
<BODY>

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

None.gif
<BR><BR>

None.gif
<INPUT type=text id=ip1 value='input content'>

None.gif
<BR><BR>

None.gif
<input type='button' onclick="setDialogValue();" value="Set Dialog Value">

None.gif
<BR><BR>

None.gif
<input type='button' onclick="doDialog();" value="Create Dialog">

None.gif
<BR><BR>

None.gif
<DIV id=d1>DIV>

None.gif
BODY>

None.gif
HTML>

None.gif

None.gif


None.gif

None.gif
<HTML>

ExpandedBlockStart.gifContractedBlock.gif
<SCRIPT>dot.gif

InBlock.gif
function window.onunload()

ExpandedSubBlockStart.gifContractedSubBlock.gif
dot.gif{

InBlock.gif  dialogArguments.dWin
=null;

ExpandedBlockEnd.gif}


None.gif
SCRIPT>

None.gif

None.gif
<BODY style="background-color:lightblue;margin:10;">

None.gifThis is some content for my DHTML dialog box.

None.gif
<BR><BR>

None.gif
<DIV id=d1>DIV>

None.gif
<BR><BR>

None.gif
<input type='text' id=ip1 onclick='dialogArguments.d1.innerHTML=ip1.value;'>

None.gif
<BR><BR>

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

None.gif
<input type='button' onclick="dialogArguments.d1.innerHTML=ip1.value;window.close();" value=" OK ">

None.gif
   

None.gif
<input type='button' onclick="window.close();" value=" Cancel ">

None.gif

None.gif
BODY>

None.gif
HTML>

None.gif

None.gif

None.gif<SCRIPT>

ExpandedBlockStart.gifContractedBlock.gif
function fnRandom(iModifier)dot.gif{

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

ExpandedBlockEnd.gif}


ExpandedBlockStart.gifContractedBlock.gif
function fnSetValues()dot.gif{

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

ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(iHeight.indexOf("Random")>-1)dot.gif{

InBlock.gif        iHeight
=fnRandom(document.body.clientHeight);

ExpandedSubBlockEnd.gif    }


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

ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(iWidth.indexOf("Random")>-1)dot.gif{

InBlock.gif        iWidth
=fnRandom(document.body.clientWidth);

ExpandedSubBlockEnd.gif    }


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

ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(iTop.indexOf("Random")>-1)dot.gif{

InBlock.gif        iTop
=fnRandom(screen.height);

ExpandedSubBlockEnd.gif    }


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

ExpandedSubBlockStart.gifContractedSubBlock.gif    
if(iLeft.indexOf("Random")>-1)dot.gif{

InBlock.gif        iLeft
=fnRandom(screen.width);

ExpandedSubBlockEnd.gif    }


InBlock.gif    
var sEdge=oForm.oEdge.options[oForm.oEdge.selectedIndex].text;

InBlock.gif    
var bCenter=oForm.oCenter.options[oForm.oCenter.selectedIndex].text;

InBlock.gif    
var bHelp=oForm.oHelp.options[oForm.oHelp.selectedIndex].text;

InBlock.gif    
var bResize=oForm.oResize.options[oForm.oResize.selectedIndex].text;

InBlock.gif    
var bStatus=oForm.oStatus.options[oForm.oStatus.selectedIndex].text;

InBlock.gif    

InBlock.gif    
var sFeatures="dialogHeight: " + iHeight + "px; dialogWidth: " + iWidth + "px; dialogTop: " + iTop + "px; dialogLeft: " + iLeft + "px; edge: " + sEdge + "; center: " + bCenter + "; help: " + bHelp + "; resizable: " + bResize + "; status: " + bStatus + ";";

InBlock.gif    

InBlock.gif    
return sFeatures;

ExpandedBlockEnd.gif}


ExpandedBlockStart.gifContractedBlock.gif
function fnOpen()dot.gif{

ExpandedSubBlockStart.gifContractedSubBlock.gif
/**//* The  method constructor looks like:

InBlock.gif    showModalDialog(

InBlock.gif        sURL="The page that is opened"

InBlock.gif        sArguments="Extra values or object references"

InBlock.gif        sFeatures="features of the window";

InBlock.gif    

InBlock.gif    )

ExpandedSubBlockEnd.gif
*/


InBlock.gif    
var sFeatures=fnSetValues();

InBlock.gif    oFeatures.innerHTML
='window.showModalDialog("SMD_target.htm","' + oForm.oArguments.value + '","' + sFeatures + '");';

InBlock.gif    window.showModalDialog(
"SMD_target.htm", oForm.oArguments.value, sFeatures)

ExpandedBlockEnd.gif}


None.gif
SCRIPT>



转载于:https://www.cnblogs.com/mjgforever/archive/2006/03/07/344760.html

更多相关:

  • 1、对话框基本要点和生命周期MFC对话框支持“所见即所得”编程模式。其类型分为模式对话框和非模式对话框。对话框由一个rc资源文件描述外观,通过ID与一个CPP类相连接,对话框内的控件使用基于ID的变量映射通讯。模式对话框对象被定义后,通过调用DoModal()函数来显示对话框并进行相关操作,此函数当对话框被关闭时返回。其返回值标明了...

  •  点击查看效果 代码直接复制就可以用了 

  • 实现选项卡的选择:   效果图如下: 代码如下: 选项卡的选择Demo