.NET用样式做模式模态窗口层，弹出遮罩层

直接上代码

前端

<div id="div_mode" class="div_mode"></div>
    <!--这是要覆盖网页的层，不必写任何东西-->
    <div id="div_content" class="div_content">
        <div id="div13" style=" 100%; height: 20px; background-color: #0099FF" align="right">
            <label onclick="closeShow()" style="font-weight: bolder; cursor: hand">
                关闭&nbsp;&nbsp;<!--用来关闭显示，在label中加了onclick事件，与鼠标悬停手的样式-->
            </label>
            <div id="divResult">

            </div>
        </div>
        <!--这是弹出的模式窗口层-->
        <input type="radio" name="merchandiseSort" value="00" checked="checked" />
    </div>

<li class="pc-imlp-component-navigation-item" onclick="yyjs()">医院介绍。在这调用
                            </li>

JS部分

<script type="text/javascript">
        //显示的方法，说明：前缀的div1、div2、body等，均为Id值
        function yyjs() {
            var loadid = layer.load(1, { shade: 0.1 });
            var url = "Admin001/Conts.aspx?act=Getyyjs";
            $.ajax({
                type: "post",
                url: url,
                dataType: "json",
                data: { key: 1 },
                success: function (r) {
                    try {
                        if (r.code > 0) {
                            $("#divResult").html(r.result);//这里加载完赋值
                            popdiv_();//这里调用模式窗口
                        }
                        else {
                            layer.msg(r.ErrorMsg, { icon: 5 });
                            layer.close(loadid);
                        }
                    } catch (e) {
                        layer.close(loadid);
                    }
                }, complete: function (r) {
                    layer.close(loadid);
                }
            });
        }
        function popdiv_() {
            $("#div_mode").css("display", "inline");
            //div1.style.display="inline";//设置层1显示
            $("#div_mode").css("width", $(document).width());
            //div1.style.width=body.clientWidth;//设置层1宽度等于body宽度，width=100%也可以，不过有一些误差，所以最好用这个
            $("#div_mode").css("height", $(document).height());
            //div1.style.height=body.clientHeight;//设置层1高度满屏
            $("#div_content").css("display", "inline");
            //div2.style.display="inline";//设置层2的显示
            $("#div_content").css("top",
            $(document).height() / 2 - $("#div_content").height() / 2);
            //div2.style.top=body.clientHeight/2-div2.clientHeight/2;//设置层2的距顶位置居中算法
            $("#div_content").css("left",
            $(document).width() / 2 - $("#div_content").width() / 2);
            // div2.style.left=body.clientWidth/2-div2.clientWidth/2;//设置层2的距左位置居中算法
        }

        function closeShow() {
            $("#div_mode").css("display", "none");
            $("#div_content").css("display", "none");
        }
    </script>
    <style>
        .div_content {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
             480px;
            margin-left: -240px;
            height: 300px;
            margin-top: -150px;
            padding: 0;
            border: 12px solid #3777BC;
            background-color: #F0F5F8;
            _position: absolute;
            z-index: 1011;
            overflow: hidden;
        }

        .div_mode {
            display: none;
            position: fixed;
            top: 0%;
            left: 0%;
             100%;
            height: 100%;
            background-color: black;
            z-index: 1010;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }
    </style>