Beranda
JavaScript

Custom Box Alert Menggunakan HTML CSS dan Javascript

Halo sobat... Dalam kesempatan kali ini codepelajar 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 akan belajar membuat custom box alert dengan html dan javascript.

Apa itu Box Alert?

Box alert adalah kotak yang muncul di layar untuk memberikan informasi atau peringatan kepada pengguna. Kotak tersebut biasanya berisi teks atau pesan singkat yang dirancang untuk memberikan pemahaman atau peringatan cepat tentang sesuatu yang terjadi, seperti kesalahan dalam suatu aplikasi atau peringatan terhadap tindakan yang perlu diambil. Box alert dapat muncul saat pengguna melakukan tindakan tertentu atau ketika sistem mendeteksi suatu peristiwa atau kondisi khusus yang perlu diinformasikan kepada pengguna.

Cara Custom Box Alert Menggunakan HTML CSS dan Javascript

1. Langkah pertama, buatlah sebuah file html untuk menuliskan code dari struktur html seperti dibawah ini:

<!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 sobat gunakan dari fontawesome.

2. Masukkan code style dari CSS agar tampilannya semakin cantik

@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;
}

3. Pada langkah ini tambahkan code dari javascript yang digunakan:

<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>

4. Jika sudah simpan semua file diatas kemudian sobat langsung buka browser dan jalankan.

Penutup

Mungkin itu saja yang dapat codepelajar sampaikan dalam tutorial kali ini dan bisa langsung saja di praktekkan kedalam website sobat sendiri, terimakasih.