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 >
          
         < 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属性进行操作，就可以实现对话框子窗口到父窗口的参数传递，非常方便。