【前端】 Layui点击图片实现放大、关闭效果

实现效果：点击图片实现放大，点击空白处关闭效果。下图。

实现逻辑：二维码是使用JQ插件生成的，点击二维码，获取图片路径，通过Layui的弹窗显示放大后的图片。

Html

<div id="qrcode" class="pi-codeimg-open" style="width:1.5rem;height:1.5rem;margin:0 auto">div>
<div style="font-size:0.22rem; width:1.8rem; text-align:center; margin:0 auto">签到二维码(放大)div>

js代码，获取点击图片的路径，修改样式 

$("#qrcode").click(function(){
       var imgSrc=$("#qrcode img").attr('src');
        // console.log(imgSrc)
        
        layer.open({
          type:1
          ,title:false
          ,closeBtn:0
          ,skin:'layui-layer-nobg'
          ,shadeClose:true
          ,content:'
 ' 
                    +' '" style="width:3.5rem; height:3.5rem" > '
                    +' 
签到二维码
 '
                +' 
'