Masker transparan layar penuh sederhana (lightBox)

Penulis：Eve Cole Waktu Pembaruan：2010-06-09 17:08:28

Belum lama ini, seorang netizen yang akan lulus mengirimi saya email. Proyek kelulusannya perlu mendapatkan efek layar kunci, tetapi dia tidak dapat memahami kode sumber dari kotak dialog yang saya posting sebelumnya kode terkait layar kunci. Saya bilang saya akan mempostingnya dalam dua hari. Karena akhir-akhir ini saya sangat sibuk, saya baru mengingatnya sekarang, dan saya harap belum terlambat untuk menulis artikel ini.

Langsung ke intinya:

Saat ini, lapisan topeng semi-transparan layar penuh banyak digunakan di situs web web2.0. Kebanyakan topeng diimplementasikan dengan menghitung ukuran halaman dan kemudian menutupinya dengan lapisan dengan ukuran yang sama dengan halaman, seperti Tencent qzone dan backend wordpress. . Metode ini dapat dimengerti, tetapi akan gagal di IE8 jika halamannya sangat panjang (penjelasan dari informasi asing adalah terkait dengan kartu grafis mesin). Beberapa siswa dengan plot yang sempurna menggaruk-garuk kepala setelah menghadapi masalah ini , mereka bahkan ingin IE8 terpaksa menggunakan metode IE7 untuk mengurai karyanya. Sebenarnya kita punya cara yang lebih baik, ayo gunakan CSS untuk menyelesaikannya!

Ingat " posisi: tetap "? Ini adalah atribut baru CSS2. Ini dapat membuat elemen tetap berada di halaman dan tidak bergerak saat menyeret bilah gulir. Misalnya, bilah navigasi tetap di bagian atas Qzone diterapkan dengan cara ini. Demikian pula, kita juga dapat menggunakan lapisan dengan tinggi dan lebar 100% untuk menutupi area pandang browser, sehingga penyembunyian layar penuh dapat dicapai. Tidak perlu menghitung ukuran halaman, dan tidak perlu memodifikasi secara dinamis ukuran saat mengubah ukuran browser.

Tapi ada sakit kepala. IE6 tidak mendukung "posisi: tetap". Kami hanya dapat mengubah nilai TOP-nya secara dinamis melalui js untuk mensimulasikan posisi statis. Saat menyeret bilah gulir, topeng pasti akan bergetar karena setiap kali berubah IE akan kembali -render lagi. Namun Microsoft telah memberi kami fitur yang sangat menarik. Jika Anda menyetel gambar latar belakang yang diposisikan secara statis untuk tag html atau body, lapisan tidak akan bergetar saat bilah gulir diseret, hampir secara sempurna menyimulasikan "posisi: tetap" ". Dalam proyek sebenarnya, saya menemukan bahwa fitur ini juga dapat memicu fungsi khusus lainnya, yang akan saya jelaskan nanti.

Untuk menghindari masalah, kami menggunakan ekspresi jahat untuk menulis beberapa skrip dalam CSS untuk IE6, dan memposisikan ulang lapisan topeng kami saat menyeret bilah gulir. Legenda mengatakan bahwa ekspresi sangat intensif dalam kinerja, tetapi ekspresi kami hampir tidak ada kerugian. Siswa yang tertarik dapat mempelajari ekspresi secara mendalam.

Oke, setelah kompatibel dengan boneka berkepala besar IE6, topeng layar kunci kami telah diadopsi oleh browser arus utama. Namun, pelajar yang menggunakan js untuk menulis efek selalu merasa sangat frustrasi dan selalu ingin memasukkan sesuatu, jadi kami akan Tambahkan a. skrip kecil untuk menghentikan operasi pengguna ketika layar terkunci, menonaktifkan bilah gulir, roda, tombol tab, pilih semua, segarkan, dan klik kanan untuk mensimulasikan 'layar kunci' yang sebenarnya:

Jalankan kotak kode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>laman kunci</ judul> <meta name = "penulis" content = "www.planeart.cn" /> <style> #pageOverlay { visibilitas: tersembunyi; posisi: tetap; kiri: 0; 100%; tinggi:100%; latar belakang:#000; filter:alpha(opacity=70); :0; tinggi:100%; } * html #pageOverlay { posisi: absolut; kiri: ekspresi(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); } } </style> <script> (function(){ // Dapatkan objek var $ = function (id){ return document.getElementById(id); }; // Melintasi var masing-masing = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i } // Pengikatan peristiwa var bind = function (obj, type, fn) { if ( obj.attachEvent) { obj['e' + ketik + fn] = fn; obj[tipe + fn] = function(){obj['e' + ketik + fn](window.event);} obj.attachEvent( 'on' + ketik, obj[ketik + fn]); } else { obj.addEventListener(ketik, fn, false }; // Hapus acara var unbind = function (obj, ketik, fn) { if ( obj.detachEvent) { coba { obj.detachEvent('on' + tipe, obj[type + fn]); obj[type + fn] = null; , fn, false); }; // Mencegah perilaku default browser var stopDefault = function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false; Posisi var getPage = function(){ var dd = document.documentElement, db = document.body; return { kiri: Math.max(dd.scrollLeft, db.scrollLeft), atas: Math.max(dd.scrollTop, db. scrollTop) }; // Kunci layar var lock = { tampilkan: function(){ $('pageOverlay').style.visibility = 'terlihat'; p.top; // Pembatasan operasi mouse halaman this.mouse = function(evt){ var e = evt ||.window.event;scroll(kiri, atas }; 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse }); // Blokir tombol tertentu: F5, Ctrl + R, Ctrl + A, Tab, Atas, Bawah this.key = function(evt){ var e = evt ||. window.event, key = e.keyCode if((key == 116) || (e.ctrlKey && key == 82) ||. (e.ctrlKey && kunci == 65) ||. (kunci == 9) ||. (kunci == 38) || (kunci == 40)) { coba{ e.keyCode = 0; ){}; stopDefault(e); }; }; bind(dokumen, 'keydown', lock.key }, tutup: function(){ $('pageOverlay').style.visibility = 'tersembunyi'; (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock. kunci); } }; ikat(jendela, 'muat', fungsi(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = fungsi( ){ lock.close(); }; })(); </skrip> </head> <body> <button id="btn_lock" style="posisi: absolut; kiri:50%; atas: 40%; ">Aktifkan layar kunci</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A Pilih Semua Tip: Anda dapat memodifikasi sebagian kode terlebih dahulu lalu tekan Jalankan]

Teks asli: http://www.planeart.cn/?p=792