JavaScript 模式对话框实现及参数传递的简单例子

来源：互联网发布：整蛊锁屏软件输入密码编辑：程序博客网时间：2024/04/29 11:41

用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">

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>

<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的值带回给父窗口，通过如下

代码实现

function btn_Ok_onclick()

{

var testId = document.getElementById("TextBoxTestId").value;

window.dialogArguments.document.getElementById("TextBoxTestId").value = testId;

window.close();

}

</script>

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

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