Dalam kesempatan kali ini saya akan membahas tentang cara custom box alert dengan HTML CSS dan Javascript. Alert merupakan sebuah pesan yang berisi peringatan atau pemberitahuan aksi sukses. Dalam kasus kali ini kita kan belajar membuat custom box alert dengan html dan javascript. Bagaimanacara membuatnya yuk mari disimak langkah-langkah berikut ini:Langkah Pertama
Buat sebuah file html untuk menuliskan code dari struktur html seperti dibawah ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Alert Box Dengan HTML dan Javascript</title> <link rel="stylesheet" href="custom.css"> </head> <body> <a class="tmbl" onclick="pop()">Click Me</a> <div id="boxes"> <i class="far fa-check-circle"></i> <h1>Great Job!</h1> <a class="far fa-times-circle" onclick="pop()"></a> </div> </body> </html> |
pada code diatas saya menambahkan icon yang bisa sahabat gunakan dari fontawesome.
Langkah Kedua
ketikkan code style dari CSS agar tampilannya semakin cantik seperti berikut
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"; body{ margin:0; padding:0; } .tmbl{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background: #e74c3c; font-size: 20px; color:#ffffff; padding: 10px 30px; cursor: pointer; border-radius: 20px; } #boxes{ width: 500px; overflow: hidden; background: #f1f1f1; box-shadow: 0 0 20px #3ee681; border-radius: 10px; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 9999; padding: 10px; text-align: center; display: none; } #boxes i{ color:#2ecc71; font-size: 50px; margin:20px 0; } #boxes h1{ color:#333; } .fa-times-circle{ font-size: 25px; color:#f00; padding: 10px 30px; cursor: pointer; position: absolute; top:0px; right: -20px; } |
Langkah Ketiga
Nah pada langkah ini tambahkan code dari javascript yang digunakan :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var t = 0; function show(){ if(t == 0 ){ document.getElementById("boxes").style.display = "block"; t = 1 ; }else{ document.getElementById("boxes").style.display = "none"; t = 0 ; } } </script> |
JIka sudah simpan semua file diatas kemudian sahabat langsung buka browser dan jalankan.
Saya kira cukup dalam pembahasan artikel ini tentang Cara Custom Box Alert Menggunakan HTML CSS dan Javascript. Semoga bermanfaat dan sampai jumpa lagi dalam pembahasan lainnya.
teriama kasih.