Buat Jendela Munculan Menggunakan HTML, CSS, dan JavaScript

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.

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.

<tubuh>
<tombolkelas="modal terbuka">





instagram viewer
Halo!tombol>
<divkelas="modal-konten tersembunyi-modal">
<divkelas="modal-header">
<h3>Arti Halo!h3>
<tombolkelas="modal dekat">×tombol>
div>
<divkelas="modal-tubuh">
<P>Halo adalah salam dalam bahasa Inggris. Ini digunakan pada
 awal kalimat sebagai pengantar baik secara pribadi atau
 sedang menelepon.P>
div>
div>
<divkelas="blur-bg tersembunyi-blur">div>
<naskahsrc="skrip.js">naskah>
tubuh>

Halaman akan muncul seperti ini:

Anda juga dapat ingin menyelidiki elemen dialog HTML jika Anda ingin menggunakan markup semantik paling banyak.

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.

* {
batas: 0;
lapisan: 0;
ukuran kotak: kotak perbatasan;
tinggi garis: 1;
}
tubuh {
tinggi: 100%;
menampilkan: melenturkan;
membenarkan-konten: tengah;
flex-direction: kolom;
menyelaraskan-item: tengah;
latar belakang: #000;
celah: 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 {
latar belakang: #20c997;
warna: #fff;
berbatasan: tidak ada;
lapisan: 20px 40px;
ukuran huruf: 48px;
radius perbatasan: 100px;
kursor: penunjuk;
transisi: semua 0.3 dtk;
garis besar: tidak ada;
}
.open-modal:aktif {
mengubah: terjemahkan Y(-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-konten {
latar belakang: #ccc;
lebar: 500px;
lapisan: 20px;
radius perbatasan: 10px;
z-index: 99;
}
.modal-header {
menampilkan: melenturkan;
membenarkan-konten: ruang-antara;
margin-bawah: 16px;
warna: #000;
ukuran huruf: 30px;
}
.modal-tubuhP { 
ukuran huruf: 22px;
tinggi garis: 1.5; 
} 
.modal-tersembunyi { 
menampilkan: tidak ada; 
}

Kemudian gaya close-modal tombol dengan latar belakang transparan dan sejajarkan di tengah.

.close-modal {
latar belakang: transparan;
berbatasan: tidak ada;
menampilkan: melenturkan;
menyelaraskan-item: tengah;
membenarkan-konten: tengah;
tinggi: 20px;
lebar: 20px;
ukuran huruf: 40px;
}
.close-modal:arahkan {
warna: #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 {
posisi: mutlak;
atas: 0;
kiri: 0;
tinggi: 100%;
lebar: 100%;
latar belakang: rgba(0, 0, 0, 0.3);
backdrop-filter: mengaburkan(5px);
}
.tersembunyi-buram {
menampilkan: tidak ada;
}

Setelah menambahkan CSS, halaman akan terlihat seperti ini:

Kontrol Munculan Dengan Kode JavaScript

Anda akan menggunakan JavaScript untuk membuka dan menutup jendela modal dengan menampilkan atau menyembunyikannya. Menambahkan 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:

membiarkan modalContent = dokumen.querySelector(".modal-konten");
membiarkan openModal = dokumen.querySelector(".modal terbuka");
membiarkan closeModal = dokumen.querySelector(".close-modal");
membiarkan blurBg = dokumen.querySelector(".blur-bg");

Tambahkan pendengar acara ke open-modal tombol sehingga membuka jendela ketika Anda mengkliknya.

openModal.addEventListener("klik", fungsi () {
 modalContent.classList.hapus("modal tersembunyi");
 blurBg.classList.hapus("tersembunyi-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:

membiarkan closeModalFunction = fungsi () {
 modalContent.classList.add("modal tersembunyi")
 blurBg.classList.add("tersembunyi-blur")
}

Tambahkan pendengar acara untuk menangani klik di latar belakang atau tombol tutup, dan kasus di mana pengguna menekan tombol Escape.

blurBg.addEventListener("klik", closeModalFunction);
closeModal.addEventListener("klik", closeModalFunction);
dokumen.addEventListener("tombol", fungsi (peristiwa) {
jika (event.key "Melarikan diri"
 && !modalContent.classList.contains("tersembunyi")
 ) {
 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 Popup Windows

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.