Alert Box Auto Closed
Umumnya kita membuat alert box dengan menggunakan fungsi javascript alert(). Fungsi alert() ini akan menampilkan dialog box dari browser.
Nah, disini saya akan berikan coding untuk membuat dialog box dengan JavaScript dan CSS tapi tanpa fungsi alert().
Alert Dialog Box akan auto close dalam waktu 3 detik. Disini juga terdapat fungsi countdown() untuk menampilkan hitungan mundur 3 sampai 0.
<!DOCTYPE html>
<html>
<head>
<title>Alert Box</title>
<style type="text/css">
body {height:100%;margin:0;padding:0;}
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 10;
background-color:rgba(0,0,0,0.5);
}
#overlay div {
width:300px;
margin: 100px auto;
background-color: yellow;
border:3px solid #a0a0a0;
border-radius:10px;
box-shadow:3px 3px 5px 6px #606060;
padding:15px;
text-align:left;
}
</style>
<script type="text/javascript">
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = "visible"
myVar=setInterval(function(){el.style.visibility = "hidden"; clearTimeout(myVar);},3000);
countdown();
}
function countdown()
{ var i="2";
myVar1=setInterval(
function()
{ document.getElementById("counter").innerHTML=i;
if (i==0) { clearTimeout(myVar1);}
i--;
},1000);
}
</script>
</head>
<body>
<h1>Alert Box Auto Close dengan CSS & Javascript</h1>
<h2>The alert box will be closed in <span id="counter">3</span> second.</h2>
<div id="overlay">
<div>
<img src="alert_icon.png" style="width:30px;height:30px;vertical-align:middle">
<b>Alert!</b>
<hr/>
<p>This message will hide in 3 second.</p>
</div>
</div>
<p>
<input type="button" onclick="overlay()" value="Click here to open dialog box" />
</p>
</body>
</html>
Selamat mencoba, semoga berhasil.
Coding Website 