Buat Jendela Munculan Menggunakan HTML, CSS, dan JavaScript
Table of content:
Jendela sembulan yang dirancang dengan baik membuat situs web Anda lebih interaktif dan modern. Mereka dapat menciptakan pasar dan meningkatkan penjualan untuk bisnis.
Anda dapat membuat jendela sembulan dengan HTML, CSS, dan JavaScript. Gunakan panduan berikut untuk membuat dan menata jendela popup dari awal. Itu membuat situs web Anda interaktif dan menciptakan pengalaman pengguna yang luar biasa.
Tulis HTML untuk Menyusun Konten
Mari kita tulis beberapa kode HTML yang memiliki jendela modal tersembunyi yang muncul saat Anda mengklik sebuah tombol. Dalam hal ini, Anda akan menampilkan arti kata tersebut Halo! Jendela sembulan akan memiliki tajuk dan beberapa konten.
Baca Juga:
Segera Anda memicu jendela modal, efek buram dilemparkan ke latar belakang. Tambahkan kelas ke bagian yang akan Anda gunakan untuk memilih modal nanti di JavaScript.
<body>
<button class="open-modal">Hello!</button> <div class="modal-content hidden-modal">
<div class="modal-header">
<h3>Meaning of Hello!</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Hello is a greeting in the English language. It is used at
the start of a sentence as an introduction whether in person or
on the phone.</p>
</div>
</div>
<div class="blur-bg hidden-blur"></div>
<script src="script.js"></script>
</body>
Halaman akan muncul seperti ini:
Anda juga dapat menyelidiki elemen dialog HTML jika ingin menggunakan sebagian besar markup semantik.
Tulis CSS untuk Menambahkan Gaya
Gunakan CSS untuk memformat jendela popup. Tempatkan jendela di tengah halaman web dengan latar belakang hitam, sehingga terlihat jelas. Anda juga akan menata jendela, latar belakangnya, dan ukuran font.
Pertama, buat gaya seragam untuk seluruh halaman dengan mengatur margin, padding, dan tinggi garis. Kemudian sejajarkan elemen tubuh di tengah pada latar belakang.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}body {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #000;
gap: 30px;
}
Selanjutnya, gaya open-modal tombol. Berikan warna latar belakang yang berbeda dari halaman lainnya agar menonjol. Juga, atur warna font, ukuran, padding, dan waktu transisinya.
.open-modal {
background: #20c997;
color: #fff;
border: none;
padding: 20px 40px;
font-size: 48px;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}.open-modal:active {
transform: translateY(-17px);
}
Kemudian, gaya konten modal yang akan ditampilkan saat jendela terbuka. Atur latar belakang putih, beri lebar lebih kecil dari badan, dan tambahkan padding.
Berikan juga indeks-z, sehingga muncul di depan open-modal tombol. Selain itu, atur modal tersembunyi ditampilkan sebagai tidak ada, sehingga tetap tersembunyi hingga Anda memicunya.
.modal-content {
background: #ccc;
width: 500px;
padding: 20px;
border-radius: 10px;
z-index: 99;
}.modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
color: #000;
font-size: 30px;
}
.modal-body p {
font-size: 22px;
line-height: 1.5;
}
.hidden-modal {
display: none;
}
Kemudian gaya close-modal tombol dengan latar belakang transparan dan sejajarkan di tengah.
.close-modal {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
font-size: 40px;
}.close-modal:hover {
color: #fa5252;
}
Terakhir, beri gaya pada elemen buram yang akan dilemparkan ke latar belakang saat jendela terbuka. Ini akan memiliki tinggi dan lebar maksimum dan filter latar belakang. Setel buram sebagai tidak ada, sehingga tidak terlihat hingga jendela terbuka.
.blur-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}.hidden-blur {
display: none;
}
Setelah menambahkan CSS, halaman akan terlihat seperti ini:
Anda akan menggunakan JavaScript untuk membuka dan menutup jendela modal dengan menampilkan atau menyembunyikannya. Tambahkan pendengar acara ke tombol untuk memicunya membuka dan menutup saat Anda mengkliknya.
Pertama pilih elemen yang relevan menggunakan kelas CSS yang Anda tetapkan di HTML:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
Tambahkan pendengar acara ke open-modal tombol sehingga membuka jendela ketika Anda mengkliknya.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
Lakukan tindakan sebaliknya untuk menangani penutupan popup tetapi, kali ini, bungkus dalam fungsi bernama. Ini akan menangani perilaku untuk beberapa peristiwa yang dapat menyebabkan jendela modal ditutup:
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
Tambahkan pendengar acara untuk menangani klik di latar belakang atau tombol tutup, dan kasus di mana pengguna menekan tombol Escape.
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
Sekarang, ketika Anda mengklik Halo! tombol, modal muncul. Anda dapat menutupnya dengan mengklik tombol batal di sebelah kanan jendela. Lihat kode di codepen.io dan berinteraksi dengan modal:
Penggunaan utama popup/modal windows dalam pengembangan web adalah untuk memfokuskan item tertentu di situs web. Setelah dipicu, itu menonaktifkan sisa halaman yang mendorong pengguna untuk memperhatikannya.
Jendela sembulan menganimasikan UI Anda. Mereka dapat mengingatkan dan menarik perhatian ke informasi penting di halaman web untuk pengguna Anda. Untuk menghapus jendela, pengguna harus melakukan beberapa tindakan. Dengan cara ini pengguna dapat berinteraksi dengan jendela dan mendapatkan informasi yang dimaksud.
Artikel Terkait
