Projek kali ini saya akan membagikan cara membuat animasi Popup sederhana yang dimana ketika tombol di klik akan muncul notif yang berisi anda sudah berhasil. Selamat siang, malam, pagi, subuh dan sebagainya, terima kasih sudah berkunjung lagi ke blog saya. Mohon maaf karena hari ini saya tidak akan berbicara panjang lebar dikarenakan waktu yang terbatas. Untuk sekarang langsung saja menuju ke bagian kodenya diatas.
Kode html seperti biasa :
<!DOCTYPE html>
<html lang="en">
<!-- animasi by Sicoding Turu -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Animasi Popup | by Sicoding turu </title>
<link rel="stylesheet" href="Popup.css">
</head>
<body>
<div class="mainContainer">
<div class="box"> <!-- ini bagian boxnya -->
<button class="btn" id="submit"> Submit </button>
</div>
<div class="popupContainer" id="popupMenu"> <!-- ini bagian muncul notifikasinya -->
<img id="image" src="./thankyou.webp" alt="">
<h2> Selamat</h2>
<p> Transaksi anda berhasil silahkan cek pada dompet kamu </p>
<button id="close"> ok </button>
</div>
</div>
</body>
<script src="Popup.js"></script>
</html>
Kode css seperti biasa :
Kode javascript ada disini :
const submitBtn = document.getElementById('submit')
const closeBtn = document.getElementById('close')
const popup = document.querySelector('.popupContainer')
submitBtn.addEventListener('click', function () {
popup.classList.add('popupActive')
})
closeBtn.addEventListener('click', function () {
popup.classList.remove('popupActive')
})
Untuk preview nya bisa dilihat diawal halaman :
Seperti biasa saya akan membagikan link download file nya. Saya ucapkan terima kasih yang sudah datang dan berkunjung ke blog ini. Walaupun blog ini hanya membagikan informasi yang mungkin bagi kebanyakan orang sudah pada tahu. Tetapi, saya cuma ingin membagikan apa yang saya tahu hehe.
Kunjungi projek lainnya disini : Projects
EmoticonEmoticon