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

直接上代码

前端

<div id="div_mode" class="div_mode"></div>
    <!--这是要覆盖网页的层,不必写任何东西-->
    <div id="div_content" class="div_content">
        <div id="div13" style="width: 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%;
            width: 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%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1010;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }
    </style>

 

posted @ 2020-06-09 14:08  离。  阅读(37)  评论(0编辑  收藏