JavaScript 弹出模式对话框

用JavaScript 弹出模式对话框 ，其实很简单，只需要调用showModalDialog这个函数就可以实现

下面是一段ASP.NET页面完整代码，它作为模式对话框的父窗口，其实现的功能是点击按钮后将TextBoxTestId和

HiddenUserId 两个控件的值通过查询字符串传递给模式对话框。这里要注意的是showModalDialog函数的第二个

参数，通过这个参数可以把父窗口的对象带给模式对话框，模式对话框可以通过window.dialogArguments这个属性获取到父窗口带入的参数，这里填写的参数是父窗口的window 对象。

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Test.aspx.cs "  Inherits = " Test "   %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 无标题页 </ title >
< script  language ="javascript"  type ="text/javascript" >

     function  btn_Ok_onclick() 
     {
         var  testId  =  document.getElementById( " TextBoxTestId " ).value; 
         var  userId  =  document.getElementById( " HiddenUserId " ).value; 
        
        showModalDialog( " OpenMessage.aspx?UserId= " + userId  
             +   " &TestId= "   +  testId ,window,
             ' dialogwidth:450px;dialogheight:480px;help:0;center:yes;resizable:0;status:0;scroll:yes ' );
            
         return ( false );            
    }

     </ script >     
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:HyperLink  ID ="HyperLink1"  runat ="server"  NavigateUrl ="~/Default.aspx" > HomePage </ asp:HyperLink >< br  />
         < asp:HyperLink  ID ="HyperLink2"  runat ="server"  NavigateUrl ="~/Default.aspx"  Target ="_blank" > HomePageNewWindow </ asp:HyperLink >< br  />
         < asp:TextBox  ID ="TextBoxTestId"  runat ="server" ></ asp:TextBox >
         &nbsp;
         < asp:Button  ID ="ButtonTestId"  runat ="server"  Text ="Button"  OnClientClick ="btn_Ok_onclick()"   />
         < asp:HiddenField  ID ="HiddenUserId"  runat ="server"   />
     </ div >
     </ form >
</ body >
</ html >

下面是模式对话框窗体后台代码，这个很简单，就是将父窗口通过查询字符串带入的两个参数复制给OpenMessage窗体的相应控件。

public   partial   class  OpenMessage : System.Web.UI.Page
{
     protected   void  Page_Load( object  sender, EventArgs e)
     {
        LabelUserId.Text  =  Request.QueryString[ " UserId " ];
        TextBoxTestId.Text  =  Request.QueryString[ " TestId " ];
    }

OpenMessage窗体点击确认按钮后要将其窗体中控件TextBoxtTestId的值带回给父窗口，通过如下

代码实现

< script language = " javascript "  type = " text/javascript " >

     function  btn_Ok_onclick() 
     {
         var  testId  =  document.getElementById( " TextBoxTestId " ).value; 
        window.dialogArguments.document.getElementById( " TextBoxTestId " ).value  =  testId;
         window.close();
    }

     </ script >

这里可以看到，window.dialogArguments 实际上是前面父窗口调用时带入的父窗口的windows对象

所以对这个对象的document属性进行操作，就可以实现对话框子窗口到父窗口的参数传递，非常方便。

 

 

作个记录。

Javascript里面分模式对话框和非模式对话框，其实两者区别就是在对话框被关闭之前用户能否在同一页面的其他地方进行工作。比如“打开文件”对话框便是典型的模式对话框，在你对这个对话框做出动作才能对打开该对话框的程序进行其他操作，而非模式对话框则不必。

模式对话框：showModalDialog
非模式对话框：showModelessDialog

1 vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
2 vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

 

 

返回值：vReturnValue，由对话框返回当然就是返回值了；
sURL：必选，为你要打开的页面；
vArguments：可选，用来向对话框传递参数；
sFeatures：可选，打开对话框的属性，各个属性直接用分号(;)隔开，包括以下一些参数，供参考：

1.   dialogHeight:   对话框高度
2.   dialogWidth:   对话框宽度
3.   dialogLeft:      离屏幕左边的距离
4.   dialogTop:      离屏幕上边的距离
5.   center:           { yes | no | 1 | 0 } ：              口是否居中，默认yes，但仍可以指定高度和宽度
6.   help:              {yes | no | 1 | 0 } ：               是否显示帮助按钮，默认yes
7.   resizable:        {yes | no | 1 | 0 } [IE5+]：    是否可被改变大小,默认no
8.   status:           {yes | no | 1 | 0 } [IE5+]：     是否显示状态栏。默认为yes[ Modeless]或no[Modal]
9.   scroll:             { yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes
10.   dialogHide:    { yes | no | 1 | 0 | on | off }：在打印或者打印预览时对话框是否隐藏。默认为no
11.   edge:            { sunken | raised }：             指明对话框的边框样式。默认为raised
12.   unadorned:   { yes | no | 1 | 0 | on | off }：默认为no