JQUERY dialog的用法詳細解析_jquery

今天用到了客戶端的對話框，把 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');
         }
     }
 });