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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

eaglet

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值