简洁 清晰弹出层讲解制作（图片点击放大）

Posted 2020-09-30 秦雨

分享原因：因为要做这个功能在网上找了好多，看的繁琐蛋疼，基于以上原因今天给大家分享个简洁 清晰 又好懂（易于学习）的功能。

我们先准备个弹出层：

<!--弹出层-->
<div class="max" id="maxfixed">
    <!--内容-->
    <div id="maxadd"></div>
</div>

弹出层的样式是：根据自己需求来自定义。给大家分享个我自己的样式需求

/*公共弹出层*/
.max{
    position: fixed;              //固定
    width: 100%;                  //全屏
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.6);   //背景为透明黑
    display: none;                //隐藏
    z-index: 9;                   //让其显示在最顶层
}
#maxadd{                          //弹出层内容区域
    position: absolute;           //定位
    top: 20%;                     //距离顶部20%
    left: 50%;                    //左右居中
    width: 500px;
    margin-left: -250px;
}

接下来要有个触发功能函数的东西：因为是举例子所以随便拿一句代码做个展示，自己网站的样式我就不瞎哔哔了

<div class="d1" onclick="max(this)"><img src="img/sycake4img1.jpg"/></div>

最后就是写功能函数：

function max(a) {                                    //直接使用this-->a
    var maxadd = document.getElementById(\'maxadd\');  //添加图片路径所在区域
    var img1 = a.firstChild;                         //获取d1下的第一个节点的元素
    var imglj = img1.src;                            //获取到图片的：图片路径
    if ($("#maxfixed").css("display") == "none") {   //判断弹出层是隐藏状态，就显示它
        /*显示*/
        $("#maxfixed").show();
    }
    var img2 = "<img src = " + imglj + " />";        //将刚才获取到的图片路径给到一个新创建的变量img2
    $("#maxadd").html(img2);                         //将创建的元素img2填充到弹出层的内容区域
    
    /*点击关闭*/
    $("#maxfixed").click(function() {                //给弹出层一个点击事件使其关闭弹出层
        if ($("#maxfixed").css("display") == "block") {
            $("#maxfixed").hide();
        }
    });
}

好了  这样就完成了  

就是这么简单