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

最新推荐文章于 2022-04-11 18:52:47 发布

原创最新推荐文章于 2022-04-11 18:52:47 发布 · 1w 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #hyperlink #asp #server #textbox #button

.Net 技术专栏收录该内容

44 篇文章

订阅专栏

本文介绍了如何使用JavaScript的showModalDialog函数创建模式对话框，并详细讲解了如何在对话框中传递和接收父窗口的数据，包括ASP.NET页面的示例代码和对话框窗体的交互过程。

部署运行你感兴趣的模型镜像

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

您可能感兴趣的与本文相关的镜像

Kotaemon

Kotaemon

AI应用

Kotaemon 是由Cinnamon 开发的开源项目，是一个RAG UI页面,主要面向DocQA的终端用户和构建自己RAG pipeline

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。