今天用到了客戶端的對話框，把 jQuery UI 中的對話框學了一下。
準備 jQuery 環境
首先，我們建立一個按鈕，點擊這個按鈕的時候，將會跳出一個對話框。
為了設定這個按鈕點擊的事件，需要準備 jQuery 的環境。
在 ready 中設定按鈕的點擊事件。
$(function() {
$(function() {
$("#btn").click(function() {
alert("btn 點選囉！");
}
);準備對話框
第二步，需要準備對話框的內容。這些內容來自 jQuery UI 的示範檔。
增加樣式
jQuery UI 中使用了大量的樣式來修飾，需要引用jQuery UI 的樣式，注意，jquery.ui.all. css 這個文件引用了大量的其他樣式文件，將jQuery UI 中development-bundlethemesbase 資料夾中的內容都複製過來。
在 ready 函數中，同時也初始化這個對話框。
$(function() {
$(function() {
>初始化
$("#btn").click(function() {
alert("btn 點選囉！");
> $("#dialog-confirm").dialog();
});
現在，開啟這個頁面的時候，就已經可以看到對話框了。
透過按鈕跳出對話框
我們希望頁面上初始化的時候看不到這個對話框，在點擊按鈕的時候再出現。那麼就需要這幾個工作。
先為對話框增加一個預設不顯示的樣式。 style="display: none"，這樣預設就不會看到這部分。
These items will be permanently deleted and cannot be recovered. Are you sure?
然後，在初始化對話框的時候，也不顯示，僅僅完成初始化工作。
在初始化對話框的時候，傳遞一個參數autoOpen: false
$("#dialog-confirm").dialog(
{
autoOpen: false
，彈出這個對話框。
複製程式碼
程式碼如下: $("#btn"). ) { // alert("btn 被點擊！");
$("#dialog-confirm").dialog("open");
});
});
如果傳遞close ，將會關閉對話框。
實作模式對話框
在實際應用中，我們經常需要實作模式對話框，在Web 中需要增加一個遮罩層來擋住底層的元素，模擬模式效果，這可以在初始化對話框的時候，傳遞一個參數modal: true 來實現。修改後的初始化程式碼變成：
$("#dialog -confirm").dialog(
{
modal: true, // 只初始化，不顯示
}
);
增加對話框的按鈕
可以為對話框增加任意的按鈕，並自訂按鈕的事件處理。我們先增加兩個按鈕，一個確定，一個取消，並請他們先關閉對話框。
// 初始化對話框#🎜>
// 初始化對話框# dialog-confirm").dialog(
{
modal: true, // "Ok": function() {
$(this).dialog('close');
$(this).dialog('close');
}
}
});
