Tingkap pop timbul untuk pelbagai tujuan mempunyai banyak kegunaan dalam pembinaan web. Mereka dapat digunakan untuk membuat berbagai jenis menu, menempatkan teks iklan dan grafik, petua alat ketika mengisi borang yang rumit, dan lebih mudah meletakkan borang itu sendiri di tingkap yang tidak mengambil ruang di halaman. Dalam artikel kami, anda akan mendapat penerangan tentang bagaimana anda boleh membuat tetingkap seperti itu.
Ia perlu
Pengetahuan asas HTML
Arahan
Langkah 1
pop timbul, html, lapisan tersembunyi
Langkah 2
Di banyak halaman di web, anda dapat melihat bahawa perpustakaan mewah dari pelbagai kerangka kerja JavaScript (jQuery, MooTools, Prototype, dll.) Digunakan untuk membuat tetingkap pop timbul di halaman. Namun, sebenarnya, perkara tersebut tidak diperlukan semasa menyelesaikan masalah ini. Alat yang terdapat dalam Hypertext Markup Language (HTML) dan Cascading Style Sheets (CSS) cukup untuk membuat pop timbul. Tingkap yang dibuat dengan cara ini akan berfungsi tanpa mengira sama ada JavaScript diaktifkan di penyemak imbas pelawat.
Semua kod yang membuat pop timbul boleh diletakkan pada dua baris. Baris pertama membuat pautan yang mesti diklik untuk memaparkan pop timbul:
Tekan di sini!
Di sini, atribut onmouseover dari tag pautan menetapkan jenis kursor tetikus lalai untuk pautan. Atribut onclick menentukan bahawa apabila pautan diklik, blok PopUp yang tersembunyi akan kelihatan.
Baris kedua, sebenarnya, tetingkap pop timbul. Lapisan dengan pengenal popUp dan ukuran tetingkap, warna dan ukuran teks, latar belakang dan sempadan yang ditentukan dalam atribut gaya:
Ini adalah teks dalam pop timbul
Ini tidak dapat dilihat secara lalai - ini ditunjukkan oleh pemilih tampilan dengan nilai tidak ada dalam deskripsi gaya lapisan.
Sebenarnya, ini semua yang anda perlukan untuk membuat tetingkap pop timbul - letakkan dua baris ini di antara tag dan halaman anda dan ia sudah siap.
Langkah 3
Untuk dapat menutup tetingkap pop timbul di hadapan tag, anda perlu menambahkan pautan yang melakukan tindakan sebaliknya - menyembunyikan lapisan yang dapat dilihat dengan pengenal PopUp:
tutup
Langkah 4
Dan jika anda mahu tetingkap muncul bukan dengan mengklik, tetapi dengan mengarahkan kursor tetikus, maka baris pertama dengan pautan mesti diubah dengan cara ini:
gerakkan tetikus ke sini!
Langkah 5
Anda sekarang sudah biasa dengan prinsip dan struktur kod tetingkap pop timbul, dan reka bentuk penampilan dan kandungannya bergantung sepenuhnya pada tujuan dan imaginasi anda.
