Css code
# Brg
{
Width: 100%;
Height: 100%;
Background: #333;
Position: absolute;
Top: 0;
Left: 0;
Filter: alpha (opacity = 60 );
-Moz-opacity: 0.6;
Opacity: 0.6;
Position: absolute;
Top: 0;
Left: 0;
Display: none;
}
# Showdiv
{
Width: 100%;
Height: auto;
Position: absolute;
Left: 300px;
Top: 150px;
Z-index: 330;
Display: none;
}
# Testdiv
{
Width: 800px;
Height: auto;
Margin: 0 0;
Border: 1px solid # 4d4d4d;
Background: # f2f2f2;
}
# Close
{
Width: 200px;
Height: 27px;
Line-height: 27px;
Font-size: 14px;
Font-weight: bold;
Border: 1px solid # 4d4d4d;
Text-align: center;
Cursor: pointer;
Margin: 0 auto;
Background: #333;
Color: # fff;
}
Html code
<Div id = "brg">
</Div>
<Div id = "showdiv">
<Div id = "close">
Close
</Div>
<Div id = "testdiv">
Content to be displayed
</Div>
</Div>
Jquery code
$ (Document). ready (function (){
Var bheight = document. body. clientHeight;
$ ("# BtnAdd"). click (function (){
$ ("# Brg" ).css ("display", "block ");
$ ("# Showdiv" ).css ("display", "block ");
$ ("# Brg" ).css ("height", document. body. scrollHeight );
$ ("# Showdiv" ).css ("top", document. body. scrollTop + 100 );
});
$ ("# Close"). click (function (){
$ ("# Brg" ).css ("display", "none ");
$ ("# Showdiv" ).css ("display", "none ");
});
});
From sunset