jQuery使用模式窗口实现在主页面和子页面中互相
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了jQuery使用模式窗口实现在主页面和子页面中互相传值的方法,涉及jQuery模式窗口及参数传递相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery使用模式窗口实现在主页面和子页面中互相传值的方法。分享给大家供大家参考,具体如下:
主面面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./1999/xhtml"> <head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> function openWindow() { var oldValue = { Name:$("#Name").val(),Age:$("#Age").val() }; var result = popModal("window.html", 300, 200, oldValue); if (result!=null && typeof (result) != "undefined") { $("#Name").val(result.Name); $("#Age").val(result.Age); } } //===================================================================== //作 者:yenange , 20120525 //功能说明: 弹出一个模式窗口 (测试:IE6/7/8 和 Firefox 正常, Chrome可以弹出, 但长宽有变而且不是模式, 它本身不支持) //输入参数: 路径,宽度,高度,参数(可选) function popModal(url, width, height, parameter ) { var feature = 'dialogWidth=' + width+'px' + ';dialogHeight=' + height + 'px' + ';dialogTop=' + (screen.height - height) / 2 + 'px' + ';dialogLeft=' + (screen.width - width) / 2 + 'px' + ';help:no;resizable:no;status=no;scroll:no'; if(typeof(parameter)=="undefined") return window.showModalDialog(url, feature); else return window.showModalDialog(url, parameter, feature); } //===================================================================== //功能说明: 弹出一个窗口 //输入参数: 路径,窗口名称,宽度,高度 function pop(helpurl, windowName, width, height) { var feature ='width=' + width + ',height=' + height + ',=' + (screen.height - height) / 2 + ',left=' + (screen.width - width) / 2 +',toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no,status=no'; window.open(helpurl, windowName, feature); } </script> </head> <body> <div> 名字<input id="Name" type="text" /><br /> 年龄<input id="Age" type="text" /><br /> <input id="Button1" type="button" value="打开模式窗口" onclick="openWindow()" /> </div> </body> </html>
子页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://.w3./1999/xhtml"> <head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var param = window.dialogArguments; $("#Name").val(param.Name); $("#Age").val(param.Age); }); function closeWindow() { var result = {}; result.Name = $("#Name").val(); result.Age = $("#Age").val(); window.returnValue = result; window.close(); } </script> </head> <body> <div> 名字<input id="Name" type="text" /><br /> 年龄<input id="Age" type="text" /><br /> <input id="Button1" type="button" value="关闭模式窗口" onclick="closeWindow()" /> </div> </body> </html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》
希望本文所述对大家jQuery程序设计有所帮助。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程