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

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

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

Html

签到二维码(放大)

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:'
 '                     +'  '                    +' 
签到二维码
 '                +' 
'          ,scrollbar:false      })})

JQ生成二维码参考：【前端】JQ生成二维码_下页、再停留的博客-CSDN博客JQ生成二维码。https://blog.csdn.net/qq_25285531/article/details/132223927

来源地址：https://blog.csdn.net/qq_25285531/article/details/132576257