`
在水伊方
  • 浏览: 111093 次
  • 性别: Icon_minigender_1
  • 来自: 福州
社区版块
存档分类
最新评论

JavaScript窗口之间值传递—模态与非模态窗口之间传值

阅读更多

模态与非模态窗口之间传值

         所谓模态对话框,就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性,用户可以在当前对话框以及其他窗口间进行切换。

 

父窗口代码

 

<!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>
<script language="javascript">
	var win;
	// 打开模态窗口
	function open_modalDialog() {		
		window.showModalDialog("son.html", window, "dialogHeight:300px, dialogWidth:150px");			
	}
	// 打开非模态窗口
	function open_modalessDialog() {
		// 获得非模态子窗口的对象
		win = window.showModelessDialog("son.html", window, "dialogHeight:300px, dialogWidth:150px");		
	}
	
	// 给打开的模态窗口赋值
	function test_child() {
		var age = win.document.getElementsByName("age")[0];
		age.value = 20;
		alert(age.value);
	}
	
	// 不能为非模态窗口赋值,因为用户必须要操作完非模态窗口后,才能操作父窗口
</script>

</head>
<body>
	用户名:<input type="text" name="username" /><br />
    <input type="button" value="打开模态窗口" onclick="open_modalDialog()" /><br />
    <input type="button" value="打开非模态窗口" onclick="open_modalessDialog()" /><br />
    <input type="button" value="给子窗口赋值" onclick="test_child()" /><br />
</body>
</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>
<script language="javascript">
	// 子窗口给父窗口赋值(模态)
	function test_parent() {
		// 获得父窗口的对象
		var parentwin = window.dialogArguments;
		var username = parentwin.document.getElementsByName("username")[0];
		username.value = "keveon";
		alert(username.value);		
	}		
</script>
</head>
<body>
	年龄:<input type="text" name="age" /><br />    
    <input type="button" value="给父窗口赋值" onclick="test_parent()" />    
</body>
</html>

 

分享到:
评论

相关推荐

    模态窗口传值www.bbssa.com

    总结,实现模态窗口传值涉及HTML结构创建、JavaScript事件处理以及数据传递。通过理解这些基本概念,开发者可以创建更丰富的交互式网页应用。对于www.bbssa.com,如果它是与模态窗口技术相关的学习资源,那么深入...

    模态窗口页的传值模态窗口页的传值

    在网页开发中,模态窗口(Modal Window)是...总之,理解和掌握以上这些模态窗口传值的策略和技术,将有助于你在实际项目中更好地构建交互丰富的网页应用。不断学习和实践,与志同道合的开发者共勉,提升自己的IT技能。

    js操作模态窗口及父子窗口间相互传值示例

    另外,在HTML中,模态窗口与父窗口之间的传值通常会涉及到操作DOM元素,如获取元素、设置内容或值等。在父窗口中,通过点击按钮触发模态对话框并获取返回值;在子窗口中,通过输入字段和按钮触发返回值的操作。通过...

    弹出窗口互相传值范例

    在IT行业中,弹出窗口(通常指的是模态窗口)是一种常见的用户界面设计,用于提供额外的信息或交互功能,而不中断用户对主界面的操作。在这个"弹出窗口互相传值范例"中,我们将会探讨如何在不同的弹出窗口之间传递...

    主页与模态页间传值实例(实用)

    "主页与模态页间传值实例"是一个很好的学习和实践案例,它涉及到的主要知识点包括:前端JavaScript与后端Java的交互、模态窗口的使用以及页面间的数据传递。下面将详细解释这些关键点。 首先,模态窗口(Modal)是...

    easyUi弹出window窗口传值与调用父页面的方法,子页面给父页面赋值

    首先,让我们理解标题中的“弹出window窗口传值”。在EasyUI中,创建一个弹出窗口通常涉及到以下步骤: 1. 创建一个HTML文件作为子页面,包含需要展示的数据和交互元素。 2. 在父页面中,通过`$.dialog`或`$.window...

    非模态对话框window.showModelessDialog简单示例

    非模态对话框在网页应用中是一个非常实用的设计元素,它允许用户在不关闭当前页面的情况下与一个独立的窗口进行交互。在JavaScript中,`window.showModelessDialog()`方法是实现这一功能的一种方式。这个方法可以...

    JavaScript新窗口与子窗口传值详解

    而非模态对话框则允许用户在对话框打开的同时继续与父窗口互动。 `showModalDialog()`和`showModelessDialog()`的语法相似,都接受三个参数: 1. `sURL`:必需,指定对话框要显示的页面URL。 2. `vArguments`:可选...

    ie+FF通用的父子模态对话框相互传值

    在IE和Firefox这两个主流浏览器上实现父子模态对话框之间的值传递,需要对JavaScript有深入的理解,并且考虑到跨浏览器兼容性。以下将详细解释这一技术点。 首先,让我们理解什么是父子模态对话框。父对话框通常是...

    JavaScript实现弹出子窗口并传值给父窗口

    `window.returnValue`是子窗口传递给父窗口的值。如果没有选中项,会显示一个提示信息。 值得注意的是,`window.showModalDialog()`方法已经过时,现代浏览器可能不再支持。一个更现代且兼容性更好的方法是使用`...

    JavaScript实现弹出模态窗体并接受传值的方法

    `showModalDialog()`方法会返回一个值,这个值可以是模态窗口内的脚本设定的。如果返回值为"123",则执行特定操作;否则,重定向到当前页面,即`location.href = location.href;`。 需要注意的是,`window....

    利用模态对话框实现父窗体、子窗体间传值

    首先,`showModalDialog` 是一个在浏览器环境中(主要是Internet Explorer)用于打开一个新的窗口或模态对话框的JavaScript函数。它的主要优点是能够阻止用户在对话框关闭前与页面其他部分进行交互,从而引导用户...

    模式窗体页面传值关于自定义控件与页面之间的传值

    "模式窗体页面传值"这一主题主要关注的是如何在模态对话框(模式窗体)与主窗口(页面)之间有效地传输数据。以下是一些关键知识点: 1. **模式窗体(Modal Form)**:模式窗体是一种阻止用户与窗口背后内容交互的...

    JS弹出窗口的各种传值方法.pdf

    子窗口可以读取父窗口传递过来的值(如`txt9`的值),并且可以设置父窗口的值(如`txt10`的值)。`setFather()`函数用于设置父窗口的值,而`returnValue()`和`relodeValue()`函数则分别用于返回一个值并关闭子窗口,...

    leanModal传值

    当我们谈论"leanModal传值"时,我们主要关注的是如何在打开模态窗口时传递数据,并在模态窗口内使用这些数据。 首先,我们需要理解`leanModal`的基本用法。通常,`leanModal`会在HTML中通过添加特定的类名和数据...

    MVC实现iframe弹窗传值

    在Web开发中,MVC(Model-...综上所述,实现MVC中的iframe弹窗传值涉及前端JavaScript交互、URL参数传递以及后端MVC的控制器和视图的配合。通过合理的代码组织和利用现有的库,可以创建出高效且易于维护的弹窗系统。

    Javascript showModalDialog两个窗体之间传值

    Javascript 两个窗体之间传值实现代码javascript中还有一个函数window.showModalDialog也可以打开一个新窗体,不过他打开的是一个模态窗口,那么如何在父窗体和子窗体之间传值呢?我们先看该函数的定义:...

    使用layer模态框给新页面传值的方法

    Layer是一款流行的JavaScript弹层组件,它提供了丰富的弹出窗口功能,包括模态框。本文将详细介绍如何使用Layer模态框给新页面传值。 首先,我们需要了解Layer的基本使用方法。Layer模态框的创建通常通过`layer....

Global site tag (gtag.js) - Google Analytics