在Web開發中，提示框（Alert Box）是一種常見的用戶交互方式。通常，提示框用于向用戶顯示重要信息或警告。然而，標準的JavaScript alert() 函數只能顯示簡單的文本信息，并且用戶只能點擊“確定”按鈕來關閉提示框。如果我們希望用戶能夠選擇“是”或“否”來做出決定，那么就需要使用更復雜的提示框。
jQuery是一個流行的JavaScript庫，它簡化了HTML文檔遍歷、事件處理、動畫和Ajax交互。雖然jQuery本身并沒有提供內置的“是/否”提示框功能，但我們可以通過結合jQuery和第三方插件來實現這一功能。
jQuery UI是jQuery的一個官方插件庫，提供了豐富的用戶界面組件，其中包括對話框（Dialog）。我們可以使用jQuery UI的Dialog組件來創建一個帶有“是”和“否”按鈕的提示框。
首先，我們需要在HTML文件中引入jQuery和jQuery UI庫。你可以通過CDN來引入這些庫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Yes/No Dialog</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.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog-confirm" title="確認操作">
<p>你確定要執行此操作嗎？</p>
</div>
<button id="show-dialog">顯示提示框</button>
</body>
</html>
接下來，我們需要在JavaScript中初始化Dialog，并設置“是”和“否”按鈕的行為。
$(function() {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"是": function() {
alert("你點擊了“是”");
$(this).dialog("close");
},
"否": function() {
alert("你點擊了“否”");
$(this).dialog("close");
}
}
});
$("#show-dialog").on("click", function() {
$("#dialog-confirm").dialog("open");
});
});
現在，當你點擊頁面上的“顯示提示框”按鈕時，將會彈出一個帶有“是”和“否”按鈕的提示框。點擊“是”或“否”按鈕后，會分別顯示相應的提示信息，并關閉提示框。
除了jQuery UI，我們還可以使用第三方插件SweetAlert2來實現更美觀的“是/否”提示框。SweetAlert2是一個功能強大且高度可定制的提示框庫。
首先，我們需要在HTML文件中引入SweetAlert2庫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SweetAlert2 Yes/No Dialog</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="show-swal">顯示提示框</button>
</body>
</html>
接下來，我們在JavaScript中使用SweetAlert2來創建“是/否”提示框：
$(function() {
$("#show-swal").on("click", function() {
Swal.fire({
title: '確認操作',
text: "你確定要執行此操作嗎？",
icon: 'warning',
showCancelButton: true,
confirmButtonText: '是',
cancelButtonText: '否'
}).then((result) => {
if (result.isConfirmed) {
alert("你點擊了“是”");
} else if (result.dismiss === Swal.DismissReason.cancel) {
alert("你點擊了“否”");
}
});
});
});
當你點擊頁面上的“顯示提示框”按鈕時，將會彈出一個帶有“是”和“否”按鈕的SweetAlert2提示框。點擊“是”或“否”按鈕后，會分別顯示相應的提示信息。
通過使用jQuery UI Dialog或第三方插件SweetAlert2，我們可以輕松地在Web應用中實現帶有“是”和“否”按鈕的提示框。這些提示框不僅功能強大，而且可以根據需要進行高度定制，從而提升用戶體驗。根據項目需求選擇合適的工具，可以讓你的Web應用更加專業和用戶友好。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
