最基本的js与css 控制弹出层效果

< html >
< head >
< title >LIGHTBOX EXAMPLE </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
     < style  type ="text/css" >
          .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 :  2px solid orange ;  
            background-color :  white ;  
            z-index : 1002 ;
            overflow :  auto ;
         }   
     </ style >
     < script  language ="javascript" >
         function  openWindow(){
            document.getElementById( ' light ' ).style.display = ' block ' ;
            document.getElementById( ' fade ' ).style.display = ' block ' ;
        }
         function  closeWindow(){
            document.getElementById( ' light ' ).style.display = ' none ' ;
            document.getElementById( ' fade ' ).style.display = ' none ' ;
        }
     </ script >

</ head >
< body >
    
     < p >可以根据自己要求修改css样式
     < input  type ="button"  value ="点击这里打开窗口"  onclick ="openWindow()" /></ p >
     </ body >
     < div  id ="light"  class ="white_content" >
     This is the lightbox content.
      < a  href ="#"  onClick ="closeWindow()" > Close </ a ></ div >
     < div  id ="fade"  class ="black_overlay" ></ div >
    
</ html >