前端讲解版--弹出层讲解制作（图片点击放大）

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

我们先准备个弹出层：

<!--弹出层-->
<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>

最后就是写功能函数：

<script>
    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();
            }
        });
    }
</script>

 

好了  这样就完成了  

就是这么简单