首頁 > 開發者 > JavaScript

淺析JavaScript中的showModalDialog的實戰應用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

IE提供的showModalDialog()方法是一個很好用的Web應用功能，雖然一般的網站應用程式不是很常見，但一旦涉及到公司專屬應用程式級的Web開發則就很有用了。現在我用一個簡單易懂的例子來說明一下：
這一應用需要兩個web檔案：
1、父視窗（也即用來控制快顯視窗的那個頁面）
showModalDialog.html
<html>
<head>
<title>showModalDialog</title>
<script language="JavaScript">
<!--
//aInfo作為數組對象，將被showModalDialog傳遞出去
//也可用var oMyobject=new Object();
//oMyobject.firstProperty = value; oMyobject.lastProperty = value;的方式定義一個對象（firstProperty,lastProperty是自己按需定義的對象屬性，可是任意取名並賦值）
var aInfo   = new Array(3);
aInfo[0] = "aaaaaaaaaaa";
aInfo[1] = "bbbbbbbbbbb";
aInfo[2] = "ccccccccccc";
var url = "dialog.html";
var sFeatures = "dialogWidth=500px;dialogHeight=500px;dialogLeft=0;dialogTop=0;";
/*sFeatures的各項選擇性參數:
*dialogWidth:快顯視窗的寬度；
*dialogHeight:快顯視窗的高度；
*dialogLeft:快顯視窗的左邊距
*dialogTop:
*edge:sunken | raised
*center: yes|no|1|0|on|off
*dialogHide: yes|no|1|0|on|off
*help: yes|no|1|0|on|off
*resizable: yes|no|1|0|on|off
*scroll: yes|no|1|0|on|off
*status: yes|no|1|0|on|off
*unadorned: yes|no|1|0|on|off
*/
function showDialog(){
//彈出一個showModalDialog,並以returnValue來擷取傳回值
var returnValue = window.showModalDialog(url,aInfo,sFeatures);
if(returnValue!=null){
   //for(var i=0;i<returnValue.length;i++){
    //document.all.info.innerHTML = returnValue[i]+"<br>";
   //}
   //輸出傳回值
    document.all.info.innerHTML=returnValue;
}
//
}
//-->
</script>
</head>
<body>
<h3><a href="#" onclick="showDialog()">開啟Dialog視窗</a></h3>
<div id="info"></div>
</body>
</html>
2、子視窗（即將被彈出的那個頁面）
dialog.html
<html>
<head>
<title>Dialog</title>
</head>
<body>
<script language="JavaScript">
<!--
//擷取父視窗傳來的對象（本例中就是父頁面中的“oInfo”數組對象，也可用“window”對象，以便對父頁面進行操作。總之，只要是object類型就成。）
var args = window.dialogArguments;
if(args!=null){
//document.write(args);
for(var i=0;i<args.length;i++){
    document.writeln(args[i]+" "+(i+1)*10);
}
}else{
document.writeln("對不起，參數為空白");
}
//向父視窗返回的值
window.returnValue = "這是子視窗返回來的值";
//-->
</script>
</body>
</html>
好了，運行showModalDialog.html即可看出其中的端倪來了。。。
通過這些工作，我實現了將值在父頁面和子頁面中的相互傳遞和處理。我想這也正是ms設計showModalDialog()方法的初衷之所在吧。當然，這個例子太簡單了。但我的目的只是通過它瞭解showModalDialog的執行機制。實際應用中需要舉一反三才行呢。（

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
javascript formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript echo javascript encode
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More