当前位置: 首页 > 编程笔记 >

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

夏俊杰
2023-03-14
本文向大家介绍js操作模态窗口及父子窗口间相互传值示例,包括了js操作模态窗口及父子窗口间相互传值示例的使用技巧和注意事项,需要的朋友参考一下
parent.hmtl
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>父窗口</title> 
<script type="text/javascript"> 

window.onload=function(){ 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
var obj={ 
test:"张三传到子窗口", 
win:window 
}; 
var returnValue = window.showModalDialog("child.html",obj,"dialogLeft:100px;dialogTop:100px;dialogWidth:400px;dialogHeight:300px;resizable:yes"); 
if(returnValue != null){ 
document.getElementById("content").innerHTML = returnValue; 
} 
}; 
} 
</script> 
</head> 
<body> 
<div id="content" style="margin:50px;width:100px;height:150px;border:5px solid #0000ff;"></div> 
<input type="button" id="btn" value="弹出子窗口"> 
</body> 
</html> 

child.html
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>子窗口</title> 
<script type="text/javascript"> 
window.onload=function(){ 
//获取url的传参 
var args = window.dialogArguments; 
var win = args.win;//父窗口对象 
var content=document.getElementById("content"); 
content.value=args.test; 
var btn=document.getElementById("btn"); 
btn.onclick=function(){ 
//模态对话框将值 
window.returnValue = content.value; 
window.close(); 
} 
} 
</script> 
</head> 
<body> 
<input type="text" id="content"><input type="button" id="btn" value="传值给父窗口"> 
</body> 
</html 
 类似资料:
  • 本文向大家介绍C#中父窗口和子窗口之间控件互操作实例,包括了C#中父窗口和子窗口之间控件互操作实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了C#中父窗口和子窗口之间控件互操作的方法。分享给大家供大家参考。具体分析如下: 很多人都苦恼于如何在子窗体中操作主窗体上的控件,或者在主窗体中操作子窗体上的控件。相比较而言,后面稍微简单一些,只要在主窗体中创建子窗体的时候,保留所创建子窗体对象即

  • 给对话框,确认信息框,或者其他内容使用模态时可以调用。为了使模态工作,你需要给模态一个 Id 来关联触发器。增加一个关闭按钮,只要增加类 .modal-close 到你的关闭按钮上。 模态的 HTML 结构 <!-- Modal Trigger --> <a class="waves-effect waves-light btn" href="#modal1">模态</a> <!-- Modal

  • 本文向大家介绍JS与jQuery实现子窗口获取父窗口元素值的方法,包括了JS与jQuery实现子窗口获取父窗口元素值的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法。分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示。 js

  • Storm core 支持处理落在窗口内的一组元组。窗口操作指定了一下两个参数 1.窗口的长度 - 窗口的长度或持续时间 2.滑动间隔 - 窗口滑动的时间间隔 滑动窗口 元组被分组在窗口和每个滑动间隔窗口中。 一个元组可以属于多个窗口。 例如一个持续时间长度为 10 秒和滑动间隔 5 秒的滑动窗口。 ........| e1 e2 | e3 e4 e5 e6 | e7 e8 e9 |..

  • 主要内容:$ionicModal,ionicModal,实例$ionicModal $ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 然后你就可以在你的 Controller 里面的注入 $ionicModal 。然后调用你刚刚写入的模板,进行初始化操作。就像下面的代码: 方法 参数 类型 详情 templateString 模板的字符串作为模

  • $ionicModal $ionicModal 可以遮住用户主界面的内容框。 你可以在你的 index 文件或者是其他文件内嵌入以下代码(里面的代码可以根据你自己的业务场景相应的改变)。 <script id="my-modal.html" type="text/ng-template"> <ion-modal-view> <ion-header-bar> <h1>My