[Front-end] Layui clicks on the image to enlarge and close the image

To achieve the effect: Click on the image to enlarge it, click on the blank space to close the effect. The following figure.

Implementation logic: The QR code is generated using the JQ plug-in. Click the QR code to obtain the image path, and display the enlarged image through the Layui pop-up window.

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 code, get the path of the clicked image, modify the style 

$("#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:'<div style="border:0px solid red;width:100%; padding:10px;border-radius:15px; "> ' 
                    +' <img src="'+imgSrc+'" style="width:3.5rem; height:3.5rem" > '
                    +' <div style="text-align:center; height:0.5rem; line-height:0.6rem">签到二维码</div> '
                +' </div>'
          ,scrollbar:false
      })

})

JQ generates QR code reference: [Front-end] JQ generates QR code_Next page, stay on the blog - CSDN blog JQ generates QR code. https://blog.csdn.net/qq_25285531/article/details/132223927