jQuery使用模式窗口實現在主頁面和子頁面中互相傳值的方法
本文實例講述了jQuery使用模式窗口實現在主頁面和子頁面中互相傳值的方法。分享給大家供大家參考,具體如下:
主面面:
<!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>
<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
+ ',top=' + (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://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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操作xml技巧總結》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
Jquery ajax執(zhí)行順序 返回自定義錯誤信息(實例講解)
由于Jquery中的Ajax的async默認是true(異步請求),如果想一個Ajax執(zhí)行完后再執(zhí)行另一個Ajax, 需要把async=false就可以了2013-11-11
IE8下Jquery獲取select選中的值post到后臺報錯問題
IE8下出現的問題是直接將selectedValue post發(fā)送到后臺,后臺接收時會報錯,這是因為IE8下selectedValue當成了數組,后臺無法識別2014-07-07
深入淺析ng-bootstrap 組件集中 tabset 組件的實現分析
這篇文章主要介紹了ng-bootstrap 組件集中 tabset 組件的實現分析 ,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
JQuery為textarea添加maxlength屬性并且兼容IE
textarea默認不支持maxlength屬性,JQuery為textarea添加maxlength,并且兼容IE,具體實現祥看本文,希望可以幫助到你2013-04-04
Jquery利用mouseenter和mouseleave實現鼠標經過彈出層且可以點擊
這篇文章主要介紹了Jquery利用mouseenter和mouseleave實現鼠標經過彈出層且可以點擊。需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02

