實例講解怎麼用jquery製作一個帶有是否的提示框

隨著網路的普及，越來越多的網站開始採用 jQuery 進行開發。而在 jQuery 中，提示框是一個非常實用的功能。本文將介紹如何使用 jQuery 製作一個是否有的提示框。

一、概述​​

在很多網站中，我們經常會看到這樣一個提示框：當我們點擊某個按鈕或連結時，會彈出一個對話框，提示我們是否確定執行該操作。這樣的提示框一般包含「確定」和「取消」兩個按鈕，使用者可以選擇是否繼續操作。

在 jQuery 中，可以輕鬆實現這種帶是否的提示框。首先需要使用 jQuery UI 函式庫，然後利用其中的 dialog 控制項來建立對話框。

二、建立對話框

下面是一個簡單的HTML 頁面，其中包含一個按鈕和一個對話框：

  
    
    
    
    
  

  
    删除
    

      
确定要删除吗？
    
  

可以看到，我們在頁面中引入了jQuery 和jQuery UI 函式庫，並建立了一個按鈕和一個對話框。對話框的內容只有一個提示文字，其標題為「提示」。

接下來，我們需要利用 jQuery 的 dialog 控制項來使得對話方塊能夠顯示出來。具體做法如下：

$(document).ready(function() {
  $("#dialog-confirm").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      "确定": function() {
        // 执行删除操作
        // ...
        $(this).dialog("close");
      },
      "取消": function() {
        $(this).dialog("close");
      }
    }
  });

  $("#btn").click(function() {
    $("#dialog-confirm").dialog("open");
  });
});

在這段程式碼中，我們首先呼叫 dialog() 方法來建立對話框，並對其進行配置。其中，autoOpen: false 表示對話方塊初始化時是關閉狀態，modal: true 表示對話方塊是模態方塊（即對話方塊彈出後，背景會變成灰色且無法操作），buttons 選項就是用來定義對話框中的按鈕。在此例中，我們定義了「確定」和「取消」兩個按鈕，並指定當使用者點擊這些按鈕時執行的動作。

在程式碼的最後，我們為按鈕綁定了一個 click 事件，當使用者點擊按鈕時，就會跳出對話框。

三、完整程式碼

以下是完整的 HTML 和 JavaScript 程式碼，供大家參考：

  
    
    
    
    
    
  

  
    删除
    

      
确定要删除吗？
    
  

以上就是使用 jQuery 製作帶是否的提示框的全部內容。希望這篇文章能夠對讀者有幫助。

以上是實例講解怎麼用jquery製作一個帶有是否的提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章！