javascript 內建的 alert 視窗按鈕選項，只有【確定】、【取消】兩個。但偏偏我的客人執意要【是】、【否】、【取消】。以前我可能會告訴她做不到，但時下景氣這麼差，只好找些替代方案來取悅人家了。
在 jQuery 1.3 版後，同時 jQuery UI 也發佈了 1.7.1 版本。在這新的 jQuery UI 裡，widgets >> Dialog 所內建的對話盒真的漂亮許多，且她提供的 Modal Dialog 模式剛好可以取代原先 alert 的效果，也可以自訂 Buttons。
可自行到 Download 頁籤下載，壓縮檔解開後，/css 與 /js 資料夾是程式開發所必要的。可以將這兩個資料夾複製到自己開發的專案下面。接著要介紹的，就是自己撰寫一個使用 jQuery UI Dialog 的程式。
< script type="text/javascript" >
$.ui.dialog.defaults.bgiframe = true;
$(function() {
$("#dialog").hide();
$("#dialog").dialog({ buttons:{
"取消":function(){ $("input[id*=h_DeliverType]").val('0'); $(this).dialog("close");},
"否":function(){ $("input[id*=h_DeliverType]").val('2'); $(this).dialog("close"); },
"是":function(){ $("input[id*=h_DeliverType]").val('1'); $(this).dialog("close"); }
},
modal: true,
autoOpen: false,
close: function(event,ui){alert('使用者按 X 離開視窗');}
});
});
function ShowDeliverDialog()
{
$('#dialog').dialog('open');
}
< /script >
< /head >
< body >
< div class="demo" >
< div id="dialog" title="對話視窗">
如果您要吃披薩，請按 '是' ，如果不要吃披薩，請按 '否'。如果目前不想選擇，請按 '取消'。
< /div >
在測試頁面，先置放一個 id=dialog 的 div，當作我們對話視窗的說明文字，title 屬性則是對話視窗最上層會顯示的文字。我希望這個對話視窗內容，是要在 User 壓了 button 按鈕後才出現，所以預設會用 jQuery 的 .hide() 方法將他隱藏。jQuery UI 的 Dialog 有一個 Options 選項叫做 buttons ，你可以在這裡定義自己所要新增的 button 以及這個 button 所要觸發的事件。modal 屬性設為 true ，則表示這個對話視窗是以獨占方式顯示，其背景物件都會以暗化來處理。autoOpen 屬性設為 false ，則是因為我們不希望對話視窗在頁面一載入就跳出，而是要等按鈕觸發後才跳出。
完成設定後，就會跟上圖結果一樣了。
補充: 20091202
在程式裡面加上 攔 close 的事件，也就是當 user 按了視窗右上角的 X 符號離開視窗時會觸發的事件。
$('.selector').dialog({
close: function(event, ui) { ... }
});
參考網址：http://jqueryui.com/demos/dialog/#event-close 「請選擇 Events 頁籤」
補充一下：
回覆刪除要顯示的內容，也就是包在標籤 DIV 裡的文字，如果在網路速度不快時，畫面會先將 DIV 裡面的文字顯示，然後才隱藏。使用者會很明顯的看到這變化。如果你不希望使用者察覺這動作，可以在 DIV 的標籤裡，加上 style="display:none" ，這樣 DIV 裡的內容，就從頭到尾都不會跑出來了。
當 Page 內容太長，而所放置的 Dialog 位於需捲動 Scroll Bar 的下方時，此時觸發 Dialog 會造成頁面滾動到最上頁。
回覆刪除解決方式，使用 <a href="#" > 方式，並將觸發的 javascript 寫成 onclick="return AlertDialog();"
function AlterDialog()
{
.....
return false;
}
這樣，Dialog 頁面就不會老是跳到最上面了。