[ASP.NET] 多重 jQuery dialog 顯示
需求 : 進入首頁後強制產生彈出視窗，用以顯示通知訊息，並且訊息可能是多則的，而每一則訊息是一個彈出視窗，當使用者關閉一則訊息後，若還有第2則訊息則再彈出訊息，以此類推直到訊息通知完畢。
由於是彈出視窗，因此技述選擇上可以使用showModalDialog 或是 windows.open 來實作，不過這二者都會面臨到一個問題就是瀏覽器安全性設定導至視窗被封鎖的問題，另外由於這裡的彈出視窗是由程式自動依是否有訊息要顯示而決定是否要觸發，這也會造成快顯被封鎖，詳細原因可以參考 http://msdn.microsoft.com/en-us/library/ms537632(v=vs.85).aspx ，因此不管showModalDialog 或是 windows.open 都無法完美達到需求所要的。所以這時選擇使用 jQuery Dialog 來實作這個功能是最恰當的了，也沒有被封鎖的問題存在。
要使用jQuery UI 套件，其頁面當然要引用相關 js、css 等，這部份就不多談了可自行參考官網，由於需求中提到一則訊息就是一個視窗並且不是一次全部顯示出，而是當使用者關閉一則後再依是否還有要顯示的訊息，再決定是否再顯示訊息視窗，因此在手法上藉由 dialog 監聽 close 事件再進行相關檢查來決定即可。程式碼很簡單，以下就簡單模擬。
string js = @"
$( document ).ready(function() {
var news = [""News1"", ""News2"", ""News3""];
var idx=0;
var div=document.getElementById(""dialog"");
div.innerHTML=news[idx];
$( ""#dialog"" ).dialog({
close: function( event, ui ) {
idx=idx+1;
if(idx<news.length){
div.innerHTML=news[idx];
$( ""#dialog"" ).dialog( ""open"" );
}
}
});
});
";
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "js", js, true);
宣告一個 news 陣列 (模擬有三則訊息內容)，在dialog close 事件裡決定是否再次呼叫 .dialog() ，以達到多重訊息效果。
若本文對您有所幫助，歡迎轉貼，但請在加註【轉貼】及來源出處，並在附上本篇的超連結，感恩您的配合囉。
By No.18
