Detasemen Gaya dan Perilaku Saat Menerapkan Lightbox Mengurangi JS

Penulis：Eve Cole Waktu Pembaruan：2025-05-23 13:00:04

[Browser yang berpartisipasi dalam tes: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]

[Sistem Operasi: Windows]

Tutorial ini bertujuan untuk memisahkan gaya dan perilaku di Lightbox, dan mengurangi pekerjaan JS dalam semua aspek (oklusi layar penuh, IE6 Occlusion Select, Centering Day -Biprirectional, konten yang sangat adaptif, dll.).

Pertama unggah kode :

Jalankan kotak kode

<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> <html xmlns = http: //www.w3.org/1999/xhtml> <adap> <meta http-equiv = konten-tipe konten = teks/html; charset = utf-8/> <meta name = konten penulis = chomo/> <tautan rel = start href = http: //www.14px.com title = home/> <itement> blocking layar penuh, lightbox yang berpusat pada otomatis </title> <style type = text/css>* {margin: 0; Padding: 0; } html, body {height: 100%; meluap: tersembunyi; font: 12px/1.5 simsun;}. mypage {line-height: 3; meluap: otomatis; Lebar: 100%; Tinggi: 100%;}. Lightbox, .popupcover, .popuppiframe, .popupcomponent {position: absolute; Kiri: 0; TOP: 0; Lebar: 100%; Tinggi: 100%;}. PopupComponent {z-index: 2; Tampilan: Tidak Ada;}. PopuppifRame {display: none; _Display: blok; _filter: alpha (opacity = 0);}. Popupcover {latar belakang:#000; Opacity: 0.7; *filter: alpha (opacity = 70);}. Lightbox {text-align: center; overflow: auto;}. LightBoxContent {display: inline-block; *Tampilan: inline; Zoom: 1; Lebar: 300px; padding: 10px; Latar belakang: #FFF; Perbatasan: 5px Solid #00B4FF; Vertical-Align: Middle;}. LightboxmaxHeight {display: inline-block; Vertikal-Align: tengah; Tinggi: 100%; *Tinggi: 99,5%; Lebar: 1px; meluap: tersembunyi; margin-left: -1px;}. Lightboxwrapper {display: inline-block; *Tampilan: inline; Zoom: 1; Text-Align: Left;}. LightBoxClose {Color:#f00;}. Lightboxsubmit {margin-top: 10px; Padding-top: 5px; Border-top: 1px solid #ccc;}. Lightboxsubmit input {font-size: 12px; padding: 0 10px; meluap: terlihat; margin: 0 5px;} </tyle> </head> <body> <div class = popupComponent id = lightbox> <iframe class = popupComponent id = lightbox> <iframe class = popupcover> </div> <div class = lightbox> <span class = lightboxMaxHeight> </div SPORD = LIGHTBOX = LIGHTBOX> LIGHTBOX = LIGHTBOXMAXHEIGH Teks terpusat <br /> </div> <div class = lightboxsubmit> <input type = tombol value = tentukan onclick = hidelayer ('lightbox')/> <input type = nilai tombol = Batalkan OnClick = hidelayer ('lightbox')/> </Div> </Div> </Div> <Div Class = PopupCCCCCCONT = POPUPONCEP = IFRET. class=popupframe></iframe><div class=popupcover></div><div class=lightbox><div class=lightboxcontent><div class=lightboxwrapper>When the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the content has exceeded the height of one screen when the Konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melampaui ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten melebihi ketinggian satu layar ketika konten telah melebihi ketinggian layar ketika konten telah melebihi ketinggian. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melampaui ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten melebihi ketinggian satu layar ketika konten telah melebihi ketinggian layar ketika konten telah melebihi ketinggian. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <Br /> /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian layar ketika satu layar telah melebihi ketinggian ketika konten telah melebihi satu layar ketika konten telah melebihi ketinggian ketika konten telah merugikan satu layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah merugikan ketinggian satu layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah mengalami ketinggian satu layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah merugikan satu layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah merugikan satu layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah merugikan The Layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah merugikan The Layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah merugikan The Layar ketika konten telah melampaui ketinggian ketika konten telah merugikan The Layar ketika konten telah melampaui ketinggian ketika konten telah merugikan satu layar ketika konten telah melampaui ketinggian dari satu layar ketika konten telah meredup Melampaui ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <BR /> Ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar ketika konten telah melebihi ketinggian satu layar. <br /></div><div class=lightboxsubmit><input type=button value=determine onclick=hidelayer('lightbox2') /><input type=button value=cancel onclick=hidelayer('lightbox2') /></div></div><span class=lightboxmaxheight></span></div><div class=mypage>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /><div style=text-align:center;><input type=button value=button button onclick=showlayer('lightbox') /></div>Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending Konten Kaya <br /> Pengkelaman Konten Kaya <br /> berpura-pura konten kaya <br /> berpura-pura konten kaya <bR /> berpura-pura konten kaya <bR /> berpura-pura kaya konten <br /> konten kaya <br /> <div style = text-align: center;> <input type = nilai tombol = value = tombol ontlick = showlayer ('lightbox') /<> tombol value = nilai tombol = tombol onklick = showlayer ('lightbox' content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br />Pretending rich content<br /> /><select><option>A select for testing whether ie6 can cover it</option></select><br />Pretended to be rich in content<br />Pretended to be rich in content<br />Pretended to menjadi kaya akan konten <br /> berpura -pura kaya akan konten <br /> berpura -pura kaya akan konten <br /> berpura -pura kaya akan konten <br /> berpura -pura kaya konten <br /> berpura -pura menjadi kaya konten <br /> menjadi kaya konten <br /> /> <pect> <pection> Pilihan lain untuk pengujian apakah IE6 dapat menutupinya </pect> </dect> <br /> berpura-pura kaya dalam konten <br /> berpura-pura menjadi kaya dalam konten <br /> <div style = text-align: center;> <input type = tombol value = tombol onclick = showlayer ('lightbox') <input type = Tombol nilai = tombol = showlayer ('lightbox') <input type = Tombol nilai = tombol = showlayer ('lightbox') <input type = tombol = tombol = tombol = showlayer ('lightbox') <input typed OnClick = showlayer ('lightbox2') /> </div> Berpura -pura kaya akan konten <br /> berpura -pura kaya akan konten <br /> /> Berpura -pura kaya akan konten <br /> berpura -pura menjadi kaya akan konten <br /> berpura -pura kaya akan konten <br /> berpura -pura kaya konten <br /> kaya akan konten <br /> menjadi kaya konten <br /> menjadi kaya konten <bR /> berpura -pura kaya konten <br /> Konten <br /> Berpura -pura kaya akan konten <br /> berpura -pura menjadi kaya dalam konten <br /> berpura -pura kaya akan konten <br /> berpura -pura menjadi kaya konten <br /> berpura -pura menjadi kaya <br /> berpura -pura kaya konten <br /> menjadi kaya akan konten <br /> berpura -pura kaya akan konten <br /> berpura -pura kaya akan konten <br /> berpura -pura menjadi kaya konten <br /> berpura -pura menjadi kaya dalam konten <br /> berpura -pura menjadi kaya dalam konten <br /> funche menjadi kaya /> < /div> <script> function showlayer (id) {document.getelement) </div> <script> function showlayer (id) {document.getelement) </div> <script> function showlayer (id) {document.getelement) </div> <script> function showlayer (id) {document.getelement. hidelayer (id) {document.geteLementById (id) .style.display = tidak ada;} </script> </body> </html>

[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]

Lightbox ini memiliki fitur-fitur berikut, Anda dapat mengujinya dengan memodifikasi kode ^- ^:

Mengklik posisi apa pun di halaman dapat menutupi layar dengan sempurna (saat ini, elemen apa pun termasuk bilah gulir tidak dapat dikontrol langsung). Elemen Pilih dapat diblokir tanpa bersembunyi di IE6 (cacat metode oklusi iframe: Setelah pemblokiran, jika bilah gulir diseret, pilih tetap akan bergerak ke tingkat atas).
Lightbox sangat mudah beradaptasi dengan kontennya dan menyajikan keadaan pusat yang sempurna.
Ketika konten adalah satu baris, itu ditampilkan di tengah; Ketika konten adalah multi-line, itu ditampilkan di kiri; Ketika ketinggian konten membuat LightBox melebihi ketinggian layar, itu muncul bilah gulir dan ditampilkan di bagian atas, sehingga pembaca dapat membaca di gambar lengkap.

Jika Anda tertarik, tips berikut untuk membentuk LightBox ini tersedia untuk Anda rujuk ke:

1. Metode untuk naungan layar penuh:

A. Sembunyikan scrollbar html/tubuh.

B. Gunakan div sebagai topeng, dan kemudian gunakan div sebagai halaman dengan bilah gulir, satu ditumpuk di atas dan satu ditumpuk di bagian bawah.

Jalankan kotak kode

[Ctrl+A All Selection Tips: Anda dapat memodifikasi beberapa kode terlebih dahulu, dan kemudian tekan Run]