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

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

我们先准备个弹出层：

<!--弹出层--><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();        }    });}

好了  这样就完成了  

就是这么简单