Click the button, the popup layer is in the middle of the screen, the background is dimmed

First, the foreground page write a button, write a layer, click the button pop-up layer

<input type= "button" value= "Select the reporting unit" style= "width:150px; height:30px; margin-bottom:10px;font-size:16px;font-family: Microsoft ya black; "

onclick= "Popupdiv (' Pop-div ');"/>
<div id= "Pop-div" class= "Pop-box" >
<div style= "width:40px; height:40px; Float:right ">
height:40px; "/>
</div>
<div class= "Pop-box-body" >
<div runat= "Server" id= "Divser" style= "text-align:center; padding-bottom:15px; padding-right:15px; " >
<span style= "Text-align:left" >
<asp:radiobuttonlist runat= "Server" id= "RadioButtonList1" borderstyle= "None" repeatcolumns= "3"
cssclass= "" repeatlayout= "Flow" autopostback= "true" onselectedindexchanged= "radiobuttonlist1_selectedindexchanged ">
</asp:RadioButtonList>
</span>
</div>
</div>

</div>

CSS Styles

/* Popup Layer */
. Pop-box
{
z-index:9999;
border:2px solid #c4E3FF;
margin:0;
Display:none;
position:fixed;
Background-color: #E1F1FF;
}

/* Header Header */
. pop-box Header
{
padding:12px 0 0 12px;
margin:0;
height:25px;
}

/* Header Header style */
. Pop-box H3
{
Color: #555;
font-size:13px;
margin:0;
}

/* Content */
. pop-box-body
{
Clear:both;
font-family: Microsoft ya black;
font-size:18px;
margin-top:40px;
}
. Mask
{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
Background-color: #666;
Filter:alpha (OPACITY=40);
-moz-opacity:0.4;
opacity:0.4;
z-index:9998; /* This value is smaller than pop box */
}
#divSer input
{
margin-left:10px;
margin-bottom:20px;
}

JS method

<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-latest.js" ></script>
<script type= "Text/javascript" >
function Popupdiv (div_id) {


var div_obj = $ ("#" + div_id);
var posleft = ($ (window). Width ()-div_obj.width ())/2;
var postop = ($ (window). Height ()-div_obj.height ())/2;
Adding and displaying matte layers
$ ("<div id= ' mask ' ></div>"). AddClass ("Mask"). AppendTo ("Body"). FadeIn (200);
The FadeIn () method uses the fade-in effect to display the selected element
Div_obj.css ({"Top": Postop, "left": Posleft}). FadeIn ();
}




function Hidediv (div_id) {
$ ("#mask"). Remove ();
The FadeOut () method uses fade-out effects to hide selected elements
$ ("#" + div_id). FadeOut ();
}
</script>

You can achieve the following effects:

Click the button, the popup layer is in the middle of the screen, the background is dimmed