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> gray background
<A href = "javascript: void (0)" onclick = "document. getelementbyid ('light '). style. display = 'block'; document. getelementbyid ('fade '). style. display = 'block' "> click </a> to open the window.
</P>
<Div id = "light" class = "content">
The content in the pop-up window is written here. Click <a href = "javascript: void (0)" onclick = "document. getelementbyid ('light '). style. display = 'none'; document. getelementbyid ('fade '). style. display = 'none' "> x </a> close the window here.
</Div>
<Div id = "Fade" class = "overlay"> </div>
</Body>
</Html>
