The most basic JS and CSS controls the pop-up Layer Effect

< 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 > You can modify the CSS style as required.
< Input Type = "Button" Value = "Click here to open the window" 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 >