對於開發過WinForm程序的人員來說，模態窗口就是ShowDialog()就可以彈出一個窗口，可是對於ASP.net咱們應該怎么做呢，那就是showModalDialog或是showModelessDialog，兩者定義如下：
window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框，由於是對話框，因此它並沒有一般用window.open()打開的窗口的所有屬性。 (IE 4+ 支持)
window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。 (IE 5+ 支持)
文章的內容如下：
（1）showModalDialog的定義
（2）showModalDialog一般使用
（3）解決回發子窗口事件時又彈出窗口問題
（4）解決子窗口向父窗口傳值問題
(5) 解決子窗口緩存問題
開始
一：showModalDialog的定義
window.showModalDialog(sURL [, vArguments] [, sFeatures])
參數說明：
sURL
必選參數，類型：字符串。用來指定對話框要顯示的文檔的URL。
vArguments
可選參數，類型：變體。用來向對話框傳遞參數。傳遞的參數類型不限，包括數組等。對話框通過window.dialogArguments來取得傳遞進來的參數。
sFeatures
可選參數，類型：字符串。用來描述對話框的外觀等信息，可以使用以下的一個或幾個，用分號“;”隔開。
dialogHeight 對話框高度，不小於１００px，ＩＥ４中dialogHeight 和 dialogWidth 默認的單位是em，而ＩＥ５中是px，為方便其見，在定義modal方式的對話框時，用px做單位。
dialogWidth: 對話框寬度。
dialogLeft: 距離桌面左的距離。
dialogTop: 離桌面上的距離。
center: {yes | no | 1 | 0 }：窗口是否居中，默認yes，但仍可以指定高度和寬度。
help: {yes | no | 1 | 0 }：是否顯示幫助按鈕，默認yes。
resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改變大小。默認no。
status: {yes | no | 1 | 0 } ［IE5+］：是否顯示狀態欄。默認為yes[ Modeless]或no[Modal]。
scroll:{ yes | no | 1 | 0 | on | off }：指明對話框是否顯示滾動條。默認為yes。
還有幾個屬性是用在HTA中的，在一般的網頁中一般不使用。
dialogHide:{ yes | no | 1 | 0 | on | off }：在打印或者打印預覽時對話框是否隱藏。默認為no。
edge:{ sunken | raised }：指明對話框的邊框樣式。默認為raised。
unadorned:{ yes | no | 1 | 0 | on | off }：默認為no。
二：showModalDialog一般使用
說了半天定義，就直接來個簡單的例子試試吧。
新建立一個項目Parent_Form.aspx,前台代碼如下：
<head runat="server"> <title>父窗口</title> <script type="text/javascript"> function OpenSelectInfo() { var width = 1000; //模態窗口的寬度 var height = 500; //模態窗口的高度 var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan"; //模態窗口的url地址 window.showModalDialog(url, null, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status:no'); } </script> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="btn_ModifyNickName" runat="server" value="打開模態窗口" style="width: 126px;" onclick="OpenSelectInfo()" /> </div> </form> </body> </html>
相關內容的注釋已經寫的很明白。這個窗口要打開ModalDialog_SelectInfo.aspx作為一個模態窗口，那么我就建立這個模態窗口吧。
<head runat="server"> <title>子窗口</title> </head> <body> <form id="form1" runat="server"> <div> <center> <table> <tr> <td> 用戶名: </td> <td> <input type="text" id="txtUserName" runat="server" /> </td> </tr> <tr> <td> 密碼: </td> <td> <input type="text" id="txtPwd" runat="server" /> </td> </tr> <tr> <td> 安全信息 </td> <td> <label runat="server" id="lblPass">1345451057450</label> <input type="text" id="txtPass" runat="server" style="display:none;" value="1345451057450" /> </td> </tr> <tr> <td colspan="2"> <asp:Button runat="server" ID="btn_Submit" Text="保 存" onclick="btn_Submit_Click" /> <input type="button" id="btn_Close" value="關 閉" onclick="javascript:window.close();" /> </td> </tr> </table> </center> </div> </form> </body> </html>
內容也是非常的簡單，沒什么好說的了。當我們打開第一個窗口Parent_Form.aspx中的按扭會彈出ModalDialog_SelectInfo.aspx這個窗口
三：解決回發子窗口事件時又彈出窗口問題
上面我們的ModalDialog_SelectInfo.aspx窗口中有個保存按扭，你單擊一下，會出現什么情況 ，會彈出新的窗口。顯然這不是我們想要的。解決辦法如下。
在<Head></Head>中間加上 <base target="_self" />就可以了。接着上面的ModalDialog_SelectInfo.aspx修改如下：
<head runat="server"> <title>子窗口</title> <base target="_self" /> <%--解決彈出新窗口問題--%> </head>
四：解決子窗口向父窗口傳值問題
解釋一下，就是子窗口操作完成后，要告訴父窗口一些信息，這些信息怎么傳遞給我們的父窗口（Parent_Form.aspx）呢。那就是使用關鍵字returnValue,為了測試我們在ModalDialog_SelectInfo.aspx頁面中加一個按扭
<input type="button" id="btn_Back" value="返回值" onclick="retunBack()" />
它調用的函數retunBack內容如下：
<script type="text/javascript"> function retunBack() { returnValue = "1001,1002"; window.close(); } </script>
我們的Parent_Form.aspx代碼如下：
<title>父窗口</title>
<script type="text/javascript">
function OpenSelectInfo() {
var width = 1000; //模態窗口的寬度
var height = 500; //模態窗口的高度
var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan"; //模態窗口的url地址
var rCode =window.showModalDialog(url, null, 'dialogWidth=' + width + 'px;dialogHeight=' + height + 'px;help:no;status:no');
alert(rCode);
}
</script>
試試吧，是不是已經彈出你想返回的結果了。
五： 解決子窗口緩存問題
在實際使用中，我們往往要在模態窗口ModalDialog_SelectInfo.aspx中處理一些邏輯，就是接收父窗口的參數，根據參數不同給出不同的操作，但是showModalDialog緩存很嚴重，你調用一次后，再調用時，它會直接取緩存的數據，不會回發服務器，從而不會執行你服務器端的代碼。如何解決這個問題呢，方法也很多。
第一種方法：在我們模態窗口中加入代碼如下，紅色部分
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ModalDialog_SelectInfo.aspx.cs" Inherits="showModalDialog_Test.ModalDialog_SelectInfo" %>
<%@ OutPutCache Location="None"%>
第二種方法：客戶端取消
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
第三種方法：在URL中加入隨機數
var url = "ModalDialog_SelectInfo.aspx?UserName=ZhangSan&rom=" +隨機數 ; //模態窗口的url地址
等等方法。不再一一舉例，感興趣的可以在網上找找相關文檔。
歡迎轉載，轉載請標注原創地址