JavaScript 弹出子窗体并返回结果到父窗体的实现代码

思路：用window.showModalDialog方法获取到弹出子窗体的引用，再在子页面用window.returnValue="***"来返回结果。

示例代码：（用jQuery简化实现）

父页面：parent.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>父页面</title>
<mce:script language="javascript"><!--

function showmodal()
{
var strReturn = window.showModalDialog("son.html",null,"dialogWidth:800px;dialogHeight:600px;help:no;status:no");
var s="您选择了：";
for(var i=0;i<strReturn.length;i++)
{
	s+=strReturn[i]+",";
	}
alert(s);

}
// --></mce:script>
</body>
</html>

子页面 son.html 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>子窗体</title>
<mce:script type="text/javascript" src="jquery-1.4.2.min.js" mce_src="jquery-1.4.2.min.js"></mce:script>
<mce:script type="text/javascript"><!--
var result;
$(function(){
		  $("#send").click(function(){
									 var result=new Array();
											$("[name=a]:checkbox:checked").each(function(){
												result.push($(this).val());
																						 });
									 window.returnValue=result;
									 window.close();
									 });
		  });
// --></mce:script>
</head>
<body>
<p>
<input type="checkbox" name="a" value="苹果" />苹果
<input type="checkbox" name="a" value="橘子" />橘子
<input type="checkbox" name="a" value="香蕉" />香蕉

<INPUT type="button" value="提交" id="send" /> 

</p>
</body>
</html>

总结：

 参数传递：

1.   要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如：
-------------------------------

parent.htm

<script>
     var obj = new Object();
     obj.name="51js";
     window.showModalDialog("son.htm",obj,"dialogWidth=200px;dialogHeight=100px");
</script>

son.htm

<script>
     var obj = window.dialogArguments
     alert("您传递的参数为：" + obj.name)
</script>

2.   可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如：

parent.htm

<script>
     str =window.showModalDialog("son.htm",,"dialogWidth=200px;dialogHeight=100px");
     alert(str);
</script>

son.htm

<script>
     window.returnValue="http://blog.csdn.net/a497785609";
</script>

扩展：

在.net中，可以通过这种方式来实现AJAX效果。当子页面传递所要选择的参数后，父页面可以实现ICallbackEventHandler接口，直接将获取到的值传回服务器端。或者用UpdatePanel的Load事件来扑捉到传递过来的参数，从而继续进行服务器端处理。

以上这篇JavaScript 弹出子窗体并返回结果到父窗体的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js showModalDialog 弹出对话框的简单实例(子窗体)

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="showdialog_dialog.aspx.cs" Inherits="WSHelpDoc_showdialog_dialog" %> 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

  • JavaScript 弹出子窗体并返回结果到父窗体的实现代码

    思路:用window.showModalDialog方法获取到弹出子窗体的引用,再在子页面用window.returnValue="***"来返回结果. 示例代码:(用jQuery简化实现) 父页面:parent.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

  • pyqt5对用qt designer设计的窗体实现弹出子窗口的示例

    1. 用qt designer编写主窗体,窗体类型是MainWindow,空白窗口上一个按钮.并转换成mainWindow.py # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'f.ui' # # Created by: PyQt5 UI code generator 5.9 # # WARNING! All changes made in this file will be lost!

  • JavaScript弹出窗口方法汇总

    本文实例汇总了常用的JavaScript弹出窗口方法,供大家对比参考,希望能对大家有所帮助.详细方法如下: 1.无提示刷新网页: 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新. 而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form, 则不会弹出提示窗口 如果页面有form表单, a)<form  method="post" ...>     会弹出提示窗口 b)<form  method=&quo

  • Javascript弹出窗口的各种方法总结

    复制代码 代码如下: //关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=javascript>window.close();</script>"); //关闭,父窗口和子窗口都不弹出对话框,直接关闭this.Response.Write("<script>");this.Response.Write("{top.opener =null;top.clos

  • javascript弹出拖动窗口

    可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>

  • javascript弹出窗口实现代码

    javascript弹出窗口实现代码

    很多网页都实现了弹出窗口,使用方面,特别的人性化,本文就大家介绍javascript实现弹出窗口特效,具体代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>弹出窗口</title> <script src="js/jquery-1.11.1.js"></sc

  • 如何创建一个JavaScript弹出DIV窗口层的效果

    在本教程中,我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果. 创建一个弹出DIV窗口可能是现在网站/网页制作中最常碰到的问题之一.传统的JavaScript弹窗已经不适合目前网站的设计理念了,理由有二:首先,不友好--生硬的弹出对话框且伴随着"哐"的一声对用户体验是个很大的挑战:其次,兼容性不够强--有相当多的浏览器屏蔽了这种JS的Alert()方法.于是,一个良好用户体验的网站需要一种更合理的解决方案--使用很少的HTML代码,很少的

  • javascript 弹出层居中效果的制作

    问题:做一个带拖动的弹出层效果(像提示框那种) 先写了一半,明天继续奋斗: javascript 弹出层居中效果的制作 * { padding:0; margin:0; list-style:none; } body { font-family:Verdana, Geneva, sans-serif; font-size:14px; } #a { width:300px; height:80px; border:5px solid #d3d3d3; background-color:#f7f7f

  • javascript弹出带文字信息的提示框效果

    本文实例讲述了javascript弹出带文字信息的提示框效果.分享给大家供大家参考,具体如下: tooltips.js: // position of the tooltip relative to the mouse in pixel // var offsetx = 12; var offsety = 8; function newelement(newid) { if(document.createElement) { var el = document.createElement('di

  • java实现点击按钮事件弹出子窗口

    java实现点击按钮事件弹出子窗口

    本文实例为大家分享了java实现点击按钮事件弹出子窗口的具体代码,供大家参考,具体内容如下 要求: 1.在父窗口中添加一个按钮 2.点击按钮弹出子窗口 注意:这是JDK1.7版本 在JDK1.7之前,JFrame是不能直接添加子窗口的,要先将JInternalFrame添加到JDesktopPane中,再将JDesktopPane添加到父窗口内,完成这个操作. (一)建立父类JFrame package com.java.view; import java.awt.BorderLayout; i

随机推荐