CSS Lightview Style Popup

หายจากเขียน blog เกี่ยวกับ css ไปนานเลย
วันนี้ขอสักหน่อยแล้วกัน นั่งเมาส์มาทั้งวัน เพราะไม่มีงานทำ 555+

มีเวลาก็ขอเขียนหน่อยดีกว่า กะว่าจะอัพตั้งแต่อยู่ office แต่ดันไม่เสร็จ
เลยต้องมาเขียนต่อที่บ้าน เอาใ้ห้เสร็จซะเลย ได้อัพสักที
วันนี้ขอเสนอแนะ CSS Lightview Style Popup
เราจะมาทำ Pop Up โดยใช้ css ซะส่วนใหญ่ดีกว่า
Code HTML

<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.gif" 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>

CSS

#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;
}
body {
     height: 100%;
     margin: 0;
     padding: 0;
     font: normal 12px Verdana, Arial, Helvetica, sans-serif;
     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;
}
.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;
}

การกำหนด ตำแหน่ง(Positioning) ใน IE6
เรารู้ดีว่า IE6 ไม่สามารถ fix ตำแหน่งได้

คุณสามารถเข้าไปอ่านบทความดี ๆ ในนี้ได้ how to make IE6 understand absolute positions


***อย่างแรก เราต้อง fix ID="fade" ให้อยู่ตำแหน่ง top กับ left ตลอดเวลา

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

***อย่างที่สองเราต้อง fix popup ให้อยู่ center

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

ส่วน code javascript ก็มิมีอะไรมากเลย

<script language=javascript type='text/javascript'>
function hideDiv() {
     if (document.getElementById) { // DOM3 = IE5, NS6
     document.getElementById('hideshow').style.visibility = 'hidden';
}
     else {
     if (document.layers) { // Netscape 4
     document.hideshow.visibility = 'hidden';
}
     else { // IE 4
     document.all.hideshow.style.visibility = 'hidden';
}
}
}
function showDiv() {
     if (document.getElementById) { // DOM3 = IE5, NS6
     document.getElementById('hideshow').style.visibility = 'visible';
}
     else {
     if (document.layers) { // Netscape 4
     document.hideshow.visibility = 'visible';
}
     else { // IE 4
     document.all.hideshow.style.visibility = 'visible'
}
}
}
</script>