Membuat Alert Box dengan Pilihan "Ya" dan "Tidak" di JavaScript
Alert box adalah cara yang umum untuk menampilkan pesan kepada pengguna di halaman web. Dalam beberapa kasus, Anda mungkin ingin memberikan pengguna opsi untuk memilih "Ya" atau "Tidak" sebagai tanggapan terhadap pesan tersebut. Artikel ini akan memandu Anda dalam membuat alert box dengan pilihan "Ya" dan "Tidak" di JavaScript.
1. Menggunakan confirm() Method
Metode confirm() adalah built-in JavaScript method yang sudah menyediakan dialog box dengan tombol "OK" dan "Cancel". Kita dapat memanfaatkannya untuk membuat alert box "Ya" dan "Tidak" dengan sedikit modifikasi.
function showYesNoAlert() {
let confirmation = confirm("Apakah Anda yakin ingin melanjutkan?");
if (confirmation) {
// Jika pengguna menekan "OK" (Ya)
alert("Anda memilih Ya!");
} else {
// Jika pengguna menekan "Cancel" (Tidak)
alert("Anda memilih Tidak!");
}
}
// Panggil fungsi untuk menampilkan alert box
showYesNoAlert();
2. Membuat Alert Box Sendiri
Untuk tampilan yang lebih kustom, Anda dapat membuat alert box sendiri dengan HTML, CSS, dan JavaScript. Berikut adalah contohnya:
HTML (index.html)
Alert Box "Ya" dan "Tidak"
Apakah Anda yakin ingin melanjutkan?
CSS (style.css)
#alert-box {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 100; /* Pastikan alert box berada di atas elemen lain */
}
.hidden {
display: none;
}
JavaScript (script.js)
function showCustomAlert() {
document.getElementById("alert-box").classList.remove("hidden");
// Tangani tombol "Ya"
document.getElementById("yes-button").addEventListener("click", function() {
alert("Anda memilih Ya!");
document.getElementById("alert-box").classList.add("hidden");
});
// Tangani tombol "Tidak"
document.getElementById("no-button").addEventListener("click", function() {
alert("Anda memilih Tidak!");
document.getElementById("alert-box").classList.add("hidden");
});
}
3. Menggunakan Library JavaScript
Tersedia berbagai library JavaScript yang dapat mempermudah Anda dalam membuat alert box, seperti:
- SweetAlert2: Library ini menyediakan berbagai jenis alert box dengan berbagai opsi kustomisasi.
- Bootstrap Modal: Jika Anda menggunakan Bootstrap, Anda dapat memanfaatkan modal untuk menampilkan alert box dengan pilihan "Ya" dan "Tidak".
Kesimpulan
Membuat alert box dengan pilihan "Ya" dan "Tidak" di JavaScript dapat dilakukan dengan berbagai cara. Anda dapat menggunakan confirm() method, membuat alert box sendiri, atau menggunakan library JavaScript untuk mempermudah proses. Pilih metode yang paling sesuai dengan kebutuhan dan preferensi Anda.