LightBox terlindung layar penuh dan terpusat secara otomatis

Penulis：Eve Cole Waktu Pembaruan：2009-07-27 17:14:47

[Browser yang berpartisipasi dalam pengujian: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Sistem operasi: Windows]

Tutorial ini bertujuan untuk memisahkan gaya dan perilaku lightBox dan mengurangi pekerjaan JS dalam berbagai aspek (penyembunyian layar penuh, pemilihan penyembunyian di ie6, pemusatan dua arah, konten adaptif ketinggian, dll.).

Pertama kodenya :

<!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 ">
<kepala>
<meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" />
<meta name="penulis" content="Chomo" />
<link rel="mulai" href=" http://www.14px.com " title="Beranda" />
<title>Pelindung layar penuh, lightBox pemusatan otomatis</title>
<gaya tipe="teks/css">
* { margin:0; bantalan:0 }
html,tubuh { tinggi:100%; luapan:tersembunyi; font:12px/1,5 simsun;}
.halaman saya { tinggi baris:3; luapan:otomatis; lebar:100%;
.kotak cahaya,
.popupSampul,
.popupIframe,
.popupComponent { posisi:absolute; kiri:0; atas:0; lebar:100%;
.popupComponent { indeks-z:2; tampilan:tidak ada;}
.popupIframe { tampilan: tidak ada; _display: blok; _filter:alpha(opacity=0);}
.popupCover { latar belakang:#000; opacity:0.7; *filter:alpha(opacity=70);}
.lightBox { perataan teks:pusat; luapan:otomatis;}
.lightBoxContent { tampilan:blok sebaris; *tampilan:sebaris; zoom:1; lebar:300px; padding:10px; latar belakang:#fff; padat #00b4ff;
.lightBoxMaxHeight { tampilan:blok sebaris; perataan vertikal:tengah; tinggi:100%; *tinggi:99,5%; lebar:1 piksel;
.lightBoxWrapper { tampilan:blok sebaris; *tampilan:sebaris; zoom:1;
.lightBoxClose { warna:#f00;}
.lightBoxSubmit { margin-atas:10px; padding-atas:5px; batas-atas:1px padat #ccc;}
.lightBoxSubmit masukan { ukuran font:12px; padding:0 10px; overflow:margin:0 5px;}
</gaya>
</kepala>
<tubuh>
<div class="popupComponent" id="lightBox">
<iframe kelas="popupIframe"></iframe>
<div kelas="popupCover"></div>
<div kelas="kotak cahaya">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Teks berada di tengah ketika perintahnya lebih kecil dari satu baris<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Batal" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe kelas="popupIframe"></iframe>
<div kelas="popupCover"></div>
<div kelas="kotak cahaya">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
Ketika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layarKetika konten telah melebihi tinggi satu layar<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Batal" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="Halaman Saya">
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
<div style="text-align:center;"><input type="button" value="Tombol di layar pertama" onclick="showLayer('lightBox')" /></div>
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
<select><option>Pilihan yang digunakan untuk menguji apakah dapat dicakup dalam IE6</option></select><br />
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
<select><option>Pilihan lain untuk menguji apakah dapat dicakup dalam IE6</option></select><br />
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
<div style="text-align:center;"><input type="button" value="Tombol terletak di layar kedua" onclick="showLayer('lightBox')" /><input type="button" value ="Ketika konten telah melebihi tinggi satu layar" onclick="showLayer('lightBox2')" /></div>
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />Pura-pura kaya akan konten<br />
</div>
<skrip>
fungsi tampilkanLayer(id) {
document.getElementById(id).style.display = "blok";
}
fungsi sembunyikanLayer(id) {
document.getElementById(id).style.display = "tidak ada";
}
</skrip>
</tubuh>
</html>

LightBox ini memiliki ciri-ciri sebagai berikut, Anda dapat mengujinya dengan memodifikasi kode ^-^:

Mengklik di mana saja pada halaman dapat melindungi layar dengan sempurna (elemen apa pun termasuk bilah gulir tidak dapat dikontrol secara langsung saat ini. Di IE6, elemen yang dipilih dapat dilindungi tanpa menyembunyikannya (kelemahan metode pelindung iframe: setelah pelindung,) jika Tarik scroll bar dan pilih akan tetap berpindah ke atas).
Ketinggian lightBox menyesuaikan dengan kontennya dan tampak terpusat sempurna.
Jika konten berupa satu baris, maka ditampilkan di tengah; jika konten terdiri dari beberapa baris, maka ditampilkan di sebelah kiri; jika tinggi konten sedemikian rupa sehingga lightBox melebihi tinggi layar, maka bilah gulir akan ditampilkan dan ditampilkan di bagian atas, sehingga pembaca dapat membacanya secara lengkap.

Jika Anda tertarik, berikut tips pembuatan lightBox ini tersedia untuk referensi Anda:

1. Metode penyembunyian layar penuh:

A. Sembunyikan bilah gulir html/body.
B. Gunakan div sebagai mask, lalu gunakan div lain untuk membuat halaman dengan bilah gulir, satu di atas dan satu lagi di bawah.