CSS Lightview Gaya Popup

Bagaimana untuk menampilkan pop-up di blog anda, berikut ini adalah pop-up yang mirip dengan "Lightview". ini adalah cara atau tahapan membuat pop-up yang berkerja mirip dengan "Lightview" :

Lihat Contoh CSS Lightview Gaya Popup disini

Tahap I : KODE HTML
DIV ini yang berisi latar belakang hitam transparan, dan popup di atasnya

<div id="hideshow" style="visibility:hidden;">
 <div id="fade"></div>
 <div class="popup_block">
  <div class="popup">
   <a href="javascript:hideDiv()"><img src="icon_close.png" class="cntrl" /></a>
   <h3>Example of Styling CSS Popups</h3>
   <p>Eu refero pertineo vulpes, molior, vel. Mos paulatim lobortis sed pneum antehabeo, tristique damnum dolor venio mauris, decet sudo, ibidem lucidus.
 </p>
  </div>
 </div>
</div>

Tahap II : CSS
CSS ini menciptakan yang transparan hitam fade belakang dari popup. dan membuat div kosong, dan menyuruh untuk stretch 100% baik secara vertikal dan horizontal, dan

#fade {
 background: #000;
 position: fixed;
 width: 100%;
 height: 100%;
 filter:alpha(opacity=80);
 opacity: .80;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /*--IE 8 Transparency--*/
 left: 0;
 top: 0;
 z-index: 10;
}

Kemudian gaya popup difixing posisi di bagian tengah layar, dan berlapis popup di atas sangat menggunakan z-index.

body {
 height: 100%;
 margin: 0;
 padding: 0;
 font: normal 12px Verdana, Arial, Helvetica, sans-serif;
 background: url(body_bg.gif);
 position: relative;
}
#hideshow {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}
.popup_block {
 background: #ddd;
 padding: 10px 20px;
 border: 10px solid #fff;
 float: left;
 width: 480px;
 position: fixed;
 top: 20%;
 left: 50%;
 margin: 0 0 0 -250px;
 z-index: 100;
}
.popup_block .popup {
 float: left;
 width: 100%;
 background: #fff;
 margin: 10px 0;
 padding: 10px 0;
 border: 1px solid #bbb;
}

Kemudian ditambah beberapa tambahan sentuhan up untuk styling dari isinya. Saya menggunakan PNG untuk menutup tombol, lihat artikel saya sebelumnya tentang cara membuat file PNG bekerja IE6.

.popup h3 {
 margin: 0 0 20px;
 padding: 5px 10px;
 border-bottom: 1px solid #bbb;
 font-size: 1.5em;
 font-weight: normal;
}
.popup p {
 padding: 5px 10px;
 margin: 5px 0;
}
.popup img.cntrl {
 position: absolute;
 right: -20px;
 top: -20px;
}

Tahap III : Tetap dalam posisi IE6?

Seperti yang kita semua tahu, IE6 tidak memahami posisi tetap. Saya melakukan sedikit penelitian dan menemukan tutorial ini besar pada cara untuk membuat IE6 memahami posisi mutlak.

* Catatan saya yang digunakan IE6 Hack untuk mendapatkan ini dilakukan dengan cepat. Bagi keras inti validasi ninjas, IE 6 ini harus spesifik gaya dalam gaya sendiri dalam pernyataan bersyarat.

Pertama, untuk memperbaiki "fade" ID ke kiri atas setiap saat:

*html #fade {
 position: absolute;
 
 top:expression(eval(document.compatMode &&
 document.compatMode=='CSS1Compat') ?
 documentElement.scrollTop
 : document.body.scrollTop);
}

Kemudian untuk memperbaiki popup di bagian tengah halaman:

*html .popup_block {
 position: absolute;
 
 top:expression(eval(document.compatMode &&
 document.compatMode=='CSS1Compat') ?
 documentElement.scrollTop
 +((documentElement.clientHeight-this.clientHeight)/2)
 : document.body.scrollTop
 +((document.body.clientHeight-this.clientHeight)/2));
 
 left:expression(eval(document.compatMode &&
 document.compatMode=='CSS1Compat') ?
 documentElement.scrollLeft
 + (document.body.clientWidth /2 )
 : document.body.scrollLeft
 + (document.body.offsetWidth /2 ));
}

Kesimpulan
Sekarang, satu-satunya hal bahwa saya tidak puas dengan adalah kenyataan bahwa bila menggunakan posisi absolut, popup lebar dan tinggi tidak dapat melebihi pengguna monitor ukuran. Jika tidak, maka kita mengalami masalah usability, di mana mereka tidak akan dapat melihat seluruh popup tidak peduli seberapa keras mereka ingin gulir. Satu hal yang dapat membantu untuk bekerja di sekitar masalah ini adalah dengan hanya menempatkan overflow: auto di. Popup kelas.

Apakah ada strategi yang lebih baik atau saran, silakan beritahu saya. Saya cari maju untuk membuat ini lebih baik dengan membantu ~