隨著網路的普及，越來越多的網站開始採用 jQuery 進行開發。而在 jQuery 中，提示框是一個非常實用的功能。本文將介紹如何使用 jQuery 製作一個是否有的提示框。
一、概述
在很多網站中，我們經常會看到這樣一個提示框：當我們點擊某個按鈕或連結時，會彈出一個對話框，提示我們是否確定執行該操作。這樣的提示框一般包含「確定」和「取消」兩個按鈕，使用者可以選擇是否繼續操作。
在 jQuery 中，可以輕鬆實現這種帶是否的提示框。首先需要使用 jQuery UI 函式庫，然後利用其中的 dialog 控制項來建立對話框。
二、建立對話框
下面是一個簡單的HTML 頁面，其中包含一個按鈕和一個對話框：
<!DOCTYPE html> <html> <head> <title>jQuery 带是否的提示框</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <button id="btn">删除</button> <div id="dialog-confirm" title="提示"> <p>确定要删除吗？</p> </div> </body> </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 程式碼，供大家參考：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 带是否的提示框</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(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");
});
});
</script>
</head>
<body>
<button id="btn">删除</button>
<div id="dialog-confirm" title="提示">
<p>确定要删除吗？</p>
</div>
</body>
</html>以上就是使用 jQuery 製作帶是否的提示框的全部內容。希望這篇文章能夠對讀者有幫助。
以上是實例講解怎麼用jquery製作一個帶有是否的提示框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
