溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下如何用jquery制作一個帶是否的提示框的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
一、概述
在很多網(wǎng)站中，我們經(jīng)常會看到這樣一種提示框：當我們點擊某個按鈕或鏈接時，會彈出一個對話框，提示我們是否確定執(zhí)行該操作。這樣的提示框一般包含“確定”和“取消”兩個按鈕，用戶可以選擇是否繼續(xù)操作。
在 jQuery 中，可以很容易地實現(xiàn)這種帶是否的提示框。首先需要使用 jQuery UI 庫，然后利用其中的 dialog 控件來創(chuàng)建對話框。
二、創(chuàng)建對話框
下面是一個簡單的 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 庫，并創(chuàng)建了一個按鈕和一個對話框。對話框的內(nèi)容只有一個提示文字，其標題為“提示”。
接下來，我們需要利用 jQuery 的 dialog 控件來使得對話框能夠顯示出來。具體做法如下：
$(document).ready(function() {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"確定": function() {
// 執(zhí)行刪除操作
// ...
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
$("#btn").click(function() {
$("#dialog-confirm").dialog("open");
});
});
在這段代碼中，我們首先調用 dialog() 方法來創(chuàng)建對話框，并對其進行配置。其中，autoOpen: false 表示對話框初始化時是關閉狀態(tài)，modal: true 表示對話框是一個模態(tài)框（即對話框彈出后，背景會變成灰色且不能操作），buttons 選項則是用來定義對話框中的按鈕。在此例中，我們定義了“確定”和“取消”兩個按鈕，并指定當用戶點擊這些按鈕時執(zhí)行的操作。
在代碼的最后，我們?yōu)榘粹o綁定了一個 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() {
// 執(zhí)行刪除操作
// ...
$(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制作一個帶是否的提示框”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
