点击按钮，弹出层位于屏幕中间，背景变灰

首先前台页面写一个button按钮，写一个层，点击按钮弹出层

<input type="button" value="选择填报单位" style="width: 150px; height: 30px; margin-bottom: 10px;font-size: 16px;font-family: 微软雅黑; "

onclick="popupDiv(‘pop-div‘);" />

<div id="pop-div" class="pop-box">

<div style="width: 40px; height: 40px; float: right">

<img alt="" src="Image/ClosePng.png" onclick="hideDiv(‘pop-div‘);" style="width: 40px;

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样式

/*弹出层*/

.pop-box

{

z-index: 9999;

border: 2px solid #c4E3FF;

margin: 0;

display: none;

position: fixed;

background-color: #E1F1FF;

}

/*头标题*/

.pop-box header

{

padding: 12px 0 0 12px;

margin: 0;

height: 25px;

}

/*头标题样式*/

.pop-box h3

{

color: #555;

font-size: 13px;

margin: 0;

}

/*内容*/

.pop-box-body

{

clear: both;

font-family: 微软雅黑;

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; /*这个数值比pop box小*/

}

#divSer input

{

margin-left: 10px;

margin-bottom: 20px;

}

js方法

<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;

//添加并显示遮罩层

$("<div id=‘mask‘></div>").addClass("mask").appendTo("body").fadeIn(200);

//fadeIn() 方法使用淡入效果来显示被选元素

div_obj.css({ "top": posTop, "left": posLeft }).fadeIn();

}

function hideDiv(div_id) {

$("#mask").remove();

//fadeOut() 方法使用淡出效果来隐藏被选元素

$("#" + div_id).fadeOut();

}

</script>

就可以实现以下效果：