Langkah Pertama
Langkah pertama kali ini adalah membuat sebuah file baru dengan extensi *html.
Kemudian ketikkan kode berikut ini.
<!DOCTYPE html>
<html>
<head>
<title>Alert Messages Box Using JavaScript|EAGLEcodes</title>
</head>
<body>
</body>
</html>Langkah kedua
Selanjutnya, Kita menambahkan Kotak Pesannya, Salin kode berikut.
<div class="pesan">
<span class="tutup" onclick="this.parentElement.style.display='none';">×</span>
Alert Messages Box Content....
</div>Untuk text berwarna biru tersebut, kalian letakkan saja pesan yang ingin kalian buat.Letakkan Dibawah tag <body>.
Langkah Ketiga
Kemudian kita tambahkan CSS Nya, Untuk Membuat Tampilan Message Box nya lebih menarik di lihat.
<style type="text/css">
.pesan {
padding: 20px;
max-width:50%;
text-align:left;
background-color: #129AA8;
color: #FFF;
margin-top:50%;
margin-left:24%;
margin-bottom: 15px;
}
.tutup {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
font-size: 22px;
line-height: 20px;
cursor: pointer;
transition: 0.3s;
}
.tutup:hover {
color: red;
}
</style>Letakkan CSS Nya diatas Tag </head>.
Langkah Ke-empat
Langkah terakhir, menambahkan JavaScript nya.
Salin kode javascript berikut ini.
<script>
var close = document.getElementsByClassName("tutup");
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>Letakkan dibawah Tag </head>.
Save File nya Dan coba Jalankan Dibrowser Kalian Masing.
Hasilnya akan seperti ini:
Comments
Post a Comment