* window.open 方法：這種方法打開浏覽器的一個新執行個體，通常加載某個特定 URL 指定的文檔。定位已經打開的視窗的特定的已命名執行個體是可能的，這樣您就可以避免打開新的視窗，而是使用您以前打開的現有視窗用于另一個目的。詳細資訊，請參見 Web Workshop 中的 open（英文）方法。通過打開浏覽器的另外一個執行個體，使用者可以在打開的視窗中自由地進行切換。您可以使用 window.open 的一個情況就是一個電子郵件應用程式，它允許使用者在一個另外的視窗中打開一條電子郵件消息，同時又保持與原視窗中的消息清單的完全互動操作。
* 無模式對話框：無模式對話框允許使用者在對話框打開的同時與原視窗進行互動操作。在這種情況中，對話框保持在浏覽器的上面并處于禁用狀态。如果使用者從原始文檔中移開進行其它浏覽，則無模式對話框将被自動關閉，因為該對話框的所有上下文已經喪失。進階搜尋功能可以很好地使用這樣的對話框，以便使使用者可以選擇文檔中找到的文本，同時使對話框保持打開的狀态，這樣使用者就可以迅速地前進到已找到文本的下一個執行個體。
* 有模式對話框：有模式對話框常使程式可以使使用者完全集中于某一特定的對話框，并要求在繼續進行之前與其進行互動操作。這種情況的一個示例就是資料輸入操作，在該操作中，必須輸入某些資料後應用程式才能繼續。
對話框基礎
下面是一個有模式對話框的簡單示例，該對話框由兩個檔案組成。第一個檔案在按某一按鈕時調用對話框；第二個檔案包含對話框的内容。
dialog1.htm:
<HTML>
<BODY>
This page will invoke my DHTML dialog box when the button is clicked.
<BR>
<input type=''button'' onclick="showModalDialog(''dcontent1.htm'');" value="Create Dialog">
</BODY>
</HTML>
dcontent1.htm:
<BODY style="background-color:lightblue;margin:10;">
This is some content for my DHTML dialog box.
<input type=''button'' onclick="window.close();" value=" OK ">
檢視第一個有模式對話框示例。
dialog1.htm 檔案在單擊按鈕時執行 showModalDialog 方法，并将第二個檔案 dcontent1.htm 用作對話框的内容。dcontent1.htm 檔案具有一些 HTML 内容和一個 OK 按鈕，單擊該按鈕時會将對話框關閉。注意對話框是如何帶着一個狀态條出現的。它可以通過對函數的可選 sFeatures 參數的值進行操作而去除。嘗試改變一下各參數的值，這可以顯示對話框的不同樣式。例如，您可以更改 dialog1.htm 中的方法調用去除狀态條并調整對話框的大小。
showModalDialog(''dcontent1.htm'','''',''status:no;resizable:yes'');
現在，将方法由 showModalDialog 改為 showModelessDialog，并檢視無模式對話框怎樣允許使用者與對話框下面的文檔進行互動操作。您可以在 Web Workshop 的 DHTML 參考（英文）一節中檢視關于所有對話框設定的完整說明。
交換資訊
這難道不是對話框真正涉及的内容嗎？要使對話框有所助益，我們需要能夠向它傳遞資訊。然後，在關閉對話框時，我們需要根據使用者曾經選擇的對話框選項對資訊進行檢索。
showModalDialog 方法的第二個參數使我們可以與對話框之間傳遞資訊。下面是它如何這樣做的一個簡單示例：
dialog2.htm
<HEAD>
</HEAD>
<SCRIPT>
function doDialog()
{
var x=showModalDialog(''dcontent2.htm'',ip1.value,''status:no;resizable:yes'');
d1.innerHTML="The dialog box return value was: " + x;
}
</SCRIPT>
<BR><BR>
<INPUT type=text id=ip1 value=''input content''>
<input type=''button'' onclick="doDialog()" value="Create Dialog">
<DIV id=d1></DIV>
dcontent2.htm
<BODY style="background-color:lightblue;margin:10;" onload="d1.innerHTML=dialogArguments;">
<input type=''button'' onclick="returnValue=true;window.close();" value=" OK ">
<input type=''button'' onclick="returnValue=false;window.close();" value=" Cancel ">
檢視第二個有模式對話框示例。
dialog2.htm 檔案調用 DHTML 對話框，後者将 dcontent2.htm 檔案用作其内容。輸入元素的值被傳遞到對話框中，對話框使用該值顯示内容。傳回值根據使用者對 OK 或 Cancel 的選擇進行設定。
在無模式對話框的情形中，傳回值則有所不同。對話框将被顯示，但調用 showModelessDialog 的代碼将繼續運作。對于無模式對話框，來自 showModelessDialog 的傳回值為 DHTML 對話框中包含的文檔的 window 對象，它可以随後用于與打開的對話框進行通信。我們來看一下下面的無模式對話框的示例。在該示例中，在首頁面設定一個值可以影響到打開的對話框，并且在對話框中設定一個值也可以影響到首頁面。
dialog3.htm
var dWin=null;
dWin=showModelessDialog(''dcontent3.htm'',window,''status:no;resizable:yes'');
function setDialogValue()
if (dWin != null)
{
dWin.d1.innerHTML=ip1.value;
}
<input type=''button'' onclick="setDialogValue();" value="Set Dialog Value">
<input type=''button'' onclick="doDialog();" value="Create Dialog">
dcontent3.htm
function window.onunload()
dialogArguments.dWin=null;
<input type=''text'' id=ip1 onclick=''dialogArguments.d1.innerHTML=ip1.value;''>
<input type=''button'' onclick="dialogArguments.d1.innerHTML=ip1.value;" value=" Apply "
>
<input type=''button'' onclick="dialogArguments.d1.innerHTML=ip1.value;window.close();"
value=" OK ">
<input type=''button'' onclick="window.close();" value=" Cancel ">
檢視無模式對話框示例。
dialog3.htm 檔案調用一個對話框并将其 window 對象作為一個參數傳遞。對話框，dcontent3.htm, 随後使用 window 對象轉而與頁面進行通信，并适當地設定文本。首頁面使用 showModelessDialog 調用的傳回值，即對話框的 window 對象再與對話框進行通信，并适當地設定其中的文本。
一個有用的對話框是怎樣的
我知道已經給出的所有示例都很簡單，并都集中于 DHTML 對話框怎樣運作。現在，我要向您展示一個對話框示例，它能完成稍微有用的事情。對于這個示例，我“借用”了一些 Web Team Talking 的 Heidi Housten 制作的代碼，這些代碼根據一個文檔中使用的 <H1> 和 <H2> 标記自動生成目錄 (TOC)。我将這些代碼放入一個無模式對話框中，它可以給出代表頁面内容的标題的連結清單。看一看，并想一想您可以使用對話框改善和引導使用者體驗的場合。
進階對話框
我在前面提到 Internet Explorer 使用了設計外觀類似 Windows 中使用的對話框的 DHTML 對話框。如果您是一位使用 Win32 API 的較為傳統的 Windows 應用程式的程式員，您同樣可以使用 DHTML 對話框。然而，如果您的應用程式需要一種唯一的方法，則 DHTML 對話框支援使您可以通過使用過濾器、轉換以及一些多媒體效果，選用另外一種風格，建構一個令人興奮的使用者界面。如果您希望了解關于這一内容的更多資訊，可以看一看 showHTMLDialog API（英文）并閱讀 建立 HTML 資源（英文）。
結束這段“對話”
使用對話框對使用者的體驗進行引導是任何使用者界面的一個重要組成部分（對對話框的過度使用會使人分心，是以請明智地使用對話框）。這裡提供的支援使您可以不受所使用的技術的限制建構希望的使用者界面。我還希望我已經設法保持了 DHTML Dude 專欄的标準，也希望您覺得有用。很高興成為本月的客座專欄作家。
本文轉自 夢在旅途 部落格園部落格，原文連結： http://www.cnblogs.com/zuowj/archive/2012/12/11/2813765.html ，如需轉載請自行聯系原作者
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)