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

   首先前台页面写一个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>

就可以实现以下效果：