背景变暗弹出对话框的html/js代码

Check it:

< html >
     < head >
         < title > EXAMPLE </ title >
         < style >
        .overlay {
            display :  none ;
            position :  absolute ;
            top :  0% ;
            left :  0% ;  
            width :  100% ;  
            height :  100% ;  
            background-color :  gray ;  
            z-index : 1001 ;  
            -moz-opacity :  0.8 ;  
            opacity : .80 ;  
            filter :  alpha(opacity=50) ;  
         }  
        .content  {
            display :  none ;
            position :  absolute ;
            top :  25% ;  
            left :  25% ;  
            width :  50% ;  
            height :  50% ;  
            padding :  16px ;  
            border :  16px solid blue ;  
            background-color :  white ;  
            z-index : 1002 ;  
            overflow :  auto ;  
         }  
         </ style >
     </ head >
     < body >
         < p > 灰化背景
         < a  href ="javascript:void(0)"  onclick ="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'" > 点击 </ a > 打开窗口
         </ p >
        
         < div  id ="light"  class ="content" >
        弹出窗口的内容写在这里。点击 < a  href ="javascript:void(0)"  onclick ="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" > X </ a > 这里关闭窗口
         </ div >
         < div  id ="fade"  class ="overlay" ></ div >
     </ body >
</ html >