Di bawah ini kita akan mempelajari cara membuat pesan peringatan/ alert message dengan CSS.
Section Artikel
Alert
Pesan peringatan(alert) dapat digunakan untuk memberi tahu pengguna tentang sesuatu yang istimewa, seperti danger, success, information atau warning.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .alert { padding: 20px; background-color: #f44336; color: white; opacity: 1; transition: opacity 0.6s; margin-bottom: 15px; } .alert.success {background-color: #4CAF50;} .alert.info {background-color: #2196F3;} .alert.warning {background-color: #ff9800;} .closebtn { margin-left: 15px; color: white; font-weight: bold; float: right; font-size: 22px; line-height: 20px; cursor: pointer; transition: 0.3s; } .closebtn:hover { color: black; } </style> </head> <body> <h2>Alert Messages</h2> <p>Klik pada simbol "x" untuk menutup alert(pesan peringatan).</p> <div class="alert"> <span class="closebtn">×</span> <strong>Danger!</strong> Menunjukkan tindakan berbahaya atau berpotensi negatif. </div> <div class="alert success"> <span class="closebtn">×</span> <strong>Success!</strong> Menunjukkan tindakan sukses atau positif. </div> <div class="alert info"> <span class="closebtn">×</span> <strong>Info!</strong> Menunjukkan perubahan atau tindakan informatif yang netral. </div> <div class="alert warning"> <span class="closebtn">×</span> <strong>Warning!</strong> Menunjukkan peringatan yang mungkin perlu diperhatikan. </div> <script> var close = document.getElementsByClassName("closebtn"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function(){ var div = this.parentElement; div.style.opacity = "0"; setTimeout(function(){ div.style.display = "none"; }, 600); } } </script> </body> </html>
Buat Alert
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.alert {
padding: 20px;
background-color: #f44336;
color: white;
}
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.closebtn:hover {
color: black;
}
</style>
</head>
<body>
<h2>Alert Messages</h2>
<p>Klik pada simbol "x" untuk menutup pesan peringatan(alert).</p>
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
<strong>Danger!</strong> Menunjukkan tindakan berbahaya atau berpotensi negatif.
</div>
</body>
</html>
Langkah 1) Tambahkan HTML:
Contoh
<div class="alert"> <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> Ini adalah alert box. </div>
Jika ingin menggunakan penutup alert seperti tanda “x”, tambahkan elemen <span> dengan atribut onclick yang mengatakan “ketika akan mengklik saya, sembunyikan elemen induk saya” – yang merupakan container <div> (class = “alert”).
Tip: Gunakan entitas HTML “×” untuk membuat huruf “x”.
Langkah 2) Tambahkan CSS:
Gaya kotak peringatan dan tombol tutup:
Contoh
/* Alert message box */
.alert {
padding: 20px;
background-color: #f44336; /* merah */
color: white;
margin-bottom: 15px;
}
/* button close */
.closebtn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
/* Saat menggerakkan mouse ke atas tombol tutup */
.closebtn:hover {
color: black;
}Banyak Alert
Jika ingin memiliki banyak pesan peringatan(alert) pada sebuah halaman, kita dapat menambahkan skrip berikut untuk menutup peringatan(alert) yang berbeda tanpa menggunakan atribut onclick pada setiap elemen.
Dan, jika ingin alert perlahan menghilang saat kita mengekliknya, tambahkan opacity dan transition ke kelas alert:
Contoh
<style>
.alert {
opacity: 1;
transition: opacity 0.6s; /* 600ms to fade out */
}
</style><script>
// Dapatkan semua elemen dengan class = "closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// Ulangi semua tombol tutup
for (i = 0; i < close.length; i++) {
// Saat seseorang mengklik button close
close[i].onclick = function(){
// Dapatkan induk dari <span class = "closebtn"> (<div class = "alert">)
var div = this.parentElement;
// Atur opacity div menjadi 0 (transparan)
div.style.opacity = "0";
// Sembunyikan div setelah 600ms (jumlah milidetik yang sama yang diperlukan untuk menghilang)
setTimeout(function(){ div.style.display = "none"; }, 600);
}
}
</script>