纯CSS Lightbox效果

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
     < head >
         < title > 纯CSS Lightbox效果 </ title >
         < style >
        .black_overlay {
            display :  none ;
            position :  absolute ;
            top :  0% ;
            left :  0% ;
            width :  100% ;
            height :  100% ;
            background-color :  black ;
            z-index : 1001 ;
            -moz-opacity :  0.8 ;
            opacity : .80 ;
            filter :  alpha(opacity=80) ;
         }
        .white_content  {
            display :  none ;
            position :  absolute ;
            top :  25% ;
            left :  25% ;
            width :  50% ;
            height :  50% ;
            padding :  16px ;
            border :  16px solid orange ;
            background-color :  white ;
            z-index : 1002 ;
            overflow :  auto ;
         }
     </ style >
     </ head >
     < body >
         < p > This is the main content. To display a lightbox click  < a  href  = "javascript:void(0)"  onclick  = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'" > here </ a ></ p >
         < div  id ="light"  class ="white_content" > This is the lightbox content.  < a  href  = "javascript:void(0)"  onclick  = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" > Close </ a ></ div >
         < div  id ="fade"  class ="black_overlay" ></ div >
     </ body >
</ html >

转载于:https://www.cnblogs.com/jueban/archive/2007/11/01/946039.html