Jendela pop-up untuk berbagai keperluan memiliki banyak kegunaan dalam konstruksi web. Mereka dapat digunakan untuk membuat berbagai macam menu, menempatkan teks dan grafik iklan, tooltips saat mengisi formulir yang rumit, dan akan lebih mudah untuk menempatkan formulir itu sendiri di jendela yang tidak memakan tempat di halaman. Dalam artikel kami, Anda akan menemukan deskripsi tentang bagaimana Anda dapat membuat jendela seperti itu.
Itu perlu
Pengetahuan dasar tentang HTML
instruksi
Langkah 1
popup, html, lapisan tersembunyi
Langkah 2
Pada banyak halaman di web, Anda dapat melihat bahwa perpustakaan mewah dari berbagai kerangka kerja JavaScript (jQuery, MooTools, Prototype, dll.) digunakan untuk membuat jendela pop-up di halaman. Namun, pada kenyataannya, mereka tidak diperlukan saat memecahkan masalah khusus ini. Alat yang tersedia di Hypertext Markup Language (HTML) dan Cascading Style Sheets (CSS) cukup untuk membuat pop-up. Jendela yang dibuat dengan cara ini akan berfungsi terlepas dari apakah JavaScript diaktifkan di browser pengunjung.
Semua kode yang membuat popup dapat ditempatkan pada dua baris. Baris pertama membuat tautan yang harus diklik untuk menampilkan munculan:
Klik disini!
Di sini, atribut onmouseover dari tag tautan menetapkan jenis kursor mouse default untuk tautan. Atribut onclick menentukan bahwa ketika tautan diklik, blok PopUp yang tersembunyi akan terlihat.
Baris kedua sebenarnya adalah jendela pop-up. Lapisan dengan pengidentifikasi PopUp dan ukuran jendela, warna dan ukuran teks, latar belakang dan batas yang ditentukan dalam atribut gaya:
Ini adalah teks dalam popup
Itu tidak terlihat secara default - ini ditunjukkan oleh pemilih tampilan dengan nilai tidak ada dalam deskripsi gaya lapisan.
Sebenarnya, hanya ini yang Anda perlukan untuk membuat jendela pop-up - tempatkan dua baris ini di antara tag dan halaman Anda dan siap digunakan.
Langkah 3
Untuk dapat menutup jendela pop-up di depan tag, Anda perlu menambahkan tautan yang melakukan tindakan sebaliknya - menyembunyikan lapisan yang terlihat dengan pengenal PopUp:
Menutup
Langkah 4
Dan jika Anda ingin jendela muncul bukan dengan mengklik, tetapi dengan mengarahkan kursor mouse, maka baris pertama dengan tautan harus dimodifikasi dengan cara ini:
pindahkan mouse ke sini!
Langkah 5
Anda sekarang sudah familiar dengan prinsip dan struktur kode jendela pop-up, dan desain tampilan dan isinya sepenuhnya tergantung pada tujuan dan imajinasi Anda.
