Source Code - Membuat Alert PopUp Dengan Java Script Pemprograman Web
Pada pembahasan kali ini kita akan membuat Alert popup secara costum dengan menggunakan bahasa Java Script.
Alert ini biasa dijumpai pada website dinamis yang mana tujuannya adalah membuat website semakin dapat berinteraksi dengan user dan juga menciptakan User Experience (UX) yang lebih mengesankan.
Oke langusng saja kita ke source codenya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tombol-buka {
position: absolute;
margin: 40vh 40%;
padding: 20px 20px;
background-color: red;
color: white;
text-decoration: none;
}
.tombol-tutup a {
color: white;
text-decoration: none;
font-size: 20px;
}
.box {
position: absolute;
margin: 30vh 40%;
padding: 50px;
background-color: rgb(200, 255, 0);
color: white;
display: none;
text-align: center;
}
.box.openbox {
display: block;
}
</style>
</head>
<body>
<!-- tombol untuk membuka popUp alert -->
<a class="tombol-buka" href="#" onclick="infoWarung()">Tekan ini untuk membuka PopUp</a>
<!-- popup alert konten -->
<div class="box" id="buka">
<h2>Hai, saya Popup Alert</h2>
<!-- tombol untuk menutup popUp alert -->
<div class="tombol-tutup" >
<a href="#" onclick="infoWarung()"> X </a>
</div>
</div>
<script>
function infoWarung(){
document.getElementById('buka').classList.toggle('openbox')
}
</script>
</body>
</html>
« Terbaru
Postingan Lebih Baru
Terlama »
Postingan Lama