模式視窗window.showModalDialog()的用法
模式視窗的用法
一、問題：
我想彈出一個視窗，然後在彈出的窗口裡，選擇或輸入一些資訊，要求這些資訊返回到父頁面。
建立父頁面：a.htm
<head>
<title></title>
<mce:script language="javascript" type="text/javascript"><!--
function OpenWin()
{
var getv = showModalDialog("b.htm", "", "dialogWidth:320px; dialogHeight:200px;status:no;help:yes");
if (getv != null)
{
document.forms[0].txtName.value=getv.split(",")[0];;
document.forms[0].txtAge.value=getv.split(",")[1];;
}
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" method="post">
<input type="text" name="txtName" id="txtName" />
<input type="text" name="txtAge" id="txtAge" />
<input type="button" name="Submit" value="開啟" onclick="OpenWin()" />
</form>
</body>
</html>
建立子頁面：b.htm
<html>
<head>
<title></title>
<mce:script language="javascript" type="text/javascript"><!--
function GetValue()
{
//window.returnValue存放子視窗向父視窗所傳值的內容
window.returnValue=document.forms[0].txtName.value+","+document.forms[0].txtAge.value;
window.close();
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" method="post">
<br />
姓名：<input name="txtName" type="text" id="txtName" /><br />
年齡：<input name="txtAge" type="text" id="txtAge" />
<input type="button" name="Submit" value="關閉" onclick="GetValue()" />
</form>
</body>
</html>
這裡利用了模式視窗window.showModalDialog(),利用window.returnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])，我們可以開啟一個模態視窗，該視窗的優點是限制使用者只能對當前的頁面進行操
作，而對其父頁面不能進行操作，常用於嚮導或者資訊獲取頁面。利用其中的vArguments我們可以在父頁面和彈出的頁面中進行引數的傳遞，引數可以為自定義的物件，也可以傳遞父頁面中任何一個控制元件的引用，這使得我們可以很容
易的來操作父頁面中的各個元素，使得引數的傳遞變得非常容易。
二、第２個引數的討論
showModalDialog(＂子頁面地址＂,"向子頁面傳遞引數","子頁面外觀設定")，關於引數的詳細設定看最後的註釋，這裡主要研究下第２個引數。
1.第２個引數為自定義物件
例：將父頁面的資訊封裝成一個物件，然後將該物件傳遞給子頁面。
父頁面：oneParent.htm<html>
<head>
<title>父頁面向子頁面傳遞自定義物件引數</title>
<mce:script language="javascript" type="text/javascript"><!--
function OpenWin()
{
//傳送頁面，利用模式視窗的第２個引數向子頁面傳遞一個物件
var person=new Object();
person.myName=document.forms[0].txtName.value;
person.myAge=document.forms[0].txtAge.value;
window.showModalDialog("oneSon.htm",person,""); //第２個引數是一個物件
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" method="post">
姓名：<input type="text" name="txtName" id="txtName" />
年齡：<input type="text" name="txtAge" id="txtAge" />
<input type="button" name="Submit" value="開啟" onclick="OpenWin()" />
</form>
</body>
</html>
子頁面：oneSon.htm
<html>
<head>
<title></title>
<mce:script language="javascript" type="text/javascript"><!--
window.onload=function(){
//對話方塊通過window.dialogArguments來取得傳遞進來的引數。
var person=window.dialogArguments;
document.forms[0].txtName.value=person.myName;
document.forms[0].txtAge.value=person.myAge;
};
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" method="post">
<br />
姓名：<input name="txtName" type="text" id="txtName" /><br />
年齡：<input name="txtAge" type="text" id="txtAge" />
<input type="button" name="Submit" value="關閉" onclick="window.close()" />
</form>
</body>
</html>
以上程式碼中，文件全部載入完,才執行window.onload指定函式，以找到document.forms[0].txtName物件，如果去掉，window.onload=function(){}直接寫大括號裡的程式碼，則必須把這個ＪＳ程式碼塊房到</body>之後才能正確執行，否則出現執行時間錯誤，找不到document.forms[0].txtName物件
2.第２個引數是父頁面的一個元素
我們可以將父頁面中元素物件的引用傳遞給子頁面，通過該引用我們可以訪問父頁面中的該元素物件。
例：其中利用元素物件的引用我們可以操縱父頁面的元素物件的屬性。
父頁面：twoParent.htm
<head>
<title>父頁面向子頁面傳遞父頁面元素</title>
<mce:script language="javascript" type="text/javascript"><!--
function OpenWin()
{
//傳送頁面，利用模式視窗的第2個引數向子頁面傳遞一個物件
window.showModalDialog("twoSon.htm",parentDiv,""); //第2個引數是父頁面中的元素物件
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" method="post">
<div id="parentDiv">
姓名：<input type="text" name="txtName" id="txtName" />
年齡：<input type="text" name="txtAge" id="txtAge" />
<input type="button" value="開啟" onclick="OpenWin()" />
</div>
</form>
</body>
</html>
子頁面：twoSon.htm
<html>
<head>
<title></title>
<mce:script language="javascript" type="text/javascript"><!--
// window.onload=function(){
//對話方塊通過window.dialogArguments來取得傳遞進來的引數。
var infoKeYi=window.dialogArguments;
// };
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" >
<div id="childDiv">
</div>
<br />
<!-- 註釋：顯示傳遞進來的，父頁面中的元素資訊-->
<input type="button" value="顯示父頁面傳遞的資訊" onclick="childDiv.innerHTML=infoKeYi.innerHTML" />
<input type="button" value="子頁面操作父頁面的資訊", onclick='infoKeYi.style.backgroundColor="green"'/>
<!-- 註釋：顯示傳遞進來的父元素資訊-->
<input type="button" name="Submit" value="關閉" onclick="window.close()" />
</form>
</body>
</html>
這裡註釋掉window.onload=function(){}，直接寫大括號裡的程式碼，目的讓JS程式碼先載入，後加載<body>裡的元素，否則出現找不到物件infoKeYi的錯誤。
３.第２個引數是window.
如果第２個引數是window,這樣可以取得父視窗的一些資料和方法。如：
//取得父視窗的JS變數 var
window.dialogArguments.父視窗中的變數;
//獲得父視窗的物件和屬性
window.dialogArguments.form1.父視窗中控制元件name.value ;
//呼叫父視窗的方法 fun
window.dialogArguments.父視窗中的方法 ;
父頁面：threeParent.htm
<head>
<title>父頁面向子頁面傳遞父頁面元素</title>
<mce:script language="javascript" type="text/javascript"><!--
//開啟視窗
function OpenWin()
{
window.showModalDialog("threeSon.htm",window,"dialogWidth:300px;dialogHeight:200px;status:no"); //第2個引數是window物件
}
//定義一個子視窗要呼叫的變數
var age=20;
//定義一個子視窗要呼叫的方法
function getHello()
{
return "你好，世界！";
}
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" method="post">
<div id="parentDiv" align="center">
姓名：<input type="text" name="txtName" id="txtName" />
<input type="button" value="開啟" onclick="OpenWin()" />
</div>
</form>
</body>
</html>
子頁面：threeSon.htm
<html>
<head>
<title></title>
<mce:script language="javascript" type="text/javascript"><!--
window.onload=function(){
//對話方塊通過window.dialogArguments來取得傳遞進來的引數。
//獲得父視窗的物件和屬性
document.forms[0].txtName.value=window.dialogArguments.form1.txtName.value;
//取得父視窗的JS變數
document.forms[0].txtAge.value=window.dialogArguments.age;
//呼叫父視窗的方法
document.forms[0].txtSay.value=window.dialogArguments.getHello();
};
// --></mce:script>
</head>
<body>
<form id="form1" runat="server" >
<div id="childDiv" align="center">
</div>
<br />
<!-- 註釋：顯示傳遞進來的，父頁面中的元素資訊-->
姓名：<input name="txtName" type="text" id="txtName" /><br />
年齡：<input name="txtAge" type="text" id="txtAge" /><br />
問候：<input name="txtSay" type="text" id="txtSay" /><br />
<input type="button" name="Submit" value="關閉" onclick="window.close()" />
</form>
</body>
</html>
三、註釋：
1、window.open()引數：
例如：
<SCRIPT LANGUAGE="javascript">
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//寫成一行
-->
</SCRIPT>
引數解釋：
<SCRIPT LANGUAGE="javascript"> js指令碼開始；
window.open 彈出新視窗的命令；
'page.html' 彈出視窗的檔名；
'newwindow' 彈出視窗的名字（不是檔名），非必須，可用空''代替；
height=100 視窗高度；
width=400 視窗寬度；
top=0 視窗距離螢幕上方的象素值；
left=0 視窗距離螢幕左側的象素值；
toolbar=no 是否顯示工具欄，yes為顯示；
menubar，scrollbars 表示選單欄和滾動欄。
resizable=no 是否允許改變視窗大小，yes為允許；
location=no 是否顯示位址列，yes為允許；
status=no 是否顯示狀態列內的資訊（通常是檔案已經開啟），yes為允許；
</SCRIPT>
2、window.showModalDialog()引數：
vReturnValue＝window.showModalDialog(sURL [, vArguments] [,sFeatures])
例如：
<!--
window.showModalDialog('Ori_Photo.aspx','','resizable:yes;scroll:yes;status:no;dialogWidth=320px;dialogHeight=230px;center=yes;help=no');
//寫成一行
-->
</SCRIPT>
引數說明：
sURL--
必選引數，型別：字串。用來指定對話方塊要顯示的文件的URL。
vArguments--
可選引數，型別：變體。用來向對話方塊傳遞引數。傳遞的引數型別不限，包括陣列等。對話方塊通過window.dialogArguments來取得傳遞進來的引數。
sFeatures--
可選引數，型別：字串。用來描述對話方塊的外觀等資訊，可以使用以下的一個或幾個，用分號“;”隔開。
1.dialogHeight :對話方塊高度，不小於１００px，ＩＥ４中dialogHeight 和 dialogWidth 預設的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話方塊時，用px做單位。
2.dialogWidth: 對話方塊寬度。
3.dialogLeft: 離螢幕左的距離。
4.dialogTop: 離螢幕上的距離。
5.center: {yes｜no｜1｜0}：視窗是否居中，預設yes，但仍可以指定高度和寬度。
6.help: {yes｜no｜1｜0}：是否顯示幫助按鈕，預設yes。
7.resizable: {yes｜no｜1｜0} ［ＩＥ５＋］：是否可被改變大小。預設no。
8.status: {yes｜no｜1｜0} ［IE5+］：是否顯示狀態列。預設為yes[ Modeless]或no[Modal]。
9.scroll:{ yes｜no｜1｜0｜on｜off}：指明對話方塊是否顯示滾動條。預設為yes。
下面幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
10.dialogHide:{ yes｜no｜1｜0｜on｜off}：在列印或者列印預覽時對話方塊是否隱藏。預設為no。
11.edge:{ sunken｜raised}：指明對話方塊的邊框樣式。預設為raised。
12.unadorned:{ yes｜no｜1｜0｜on｜off}：預設為no。