点击文字弹出图片层 - CSDN博客
https://blog.csdn.net/kfttdawv/article/details/47782083
这个更简单：
html如何实现点击文字弹出二维码图片 - spencerht的回答 - SegmentFault 思否
https://segmentfault.com/q/1010000011856438/a-1020000011857482
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #lookup { margin-top: 50px; border: 1px solid black; cursor: pointer; } #authimg img { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; display: block; } #authimg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); z-index: 9999; display: none; } </style> <script src="http://code.jquery.com/jquery-3.2.1.js" ></script> </head> <body> <button id="lookup">查看</button> <div id="authimg"> <img id="image" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg"> </div> <script> $(function() { $("#lookup").click(function() { $("#authimg").fadeIn("slow"); }); $("#authimg").click(function() { $("#authimg").fadeOut("slow"); }) }); </script> </body> </html>
总结2个点击图片弹层观看的jquery插件 - 初级程序员的资料 - ITeye博客
http://canlynet.iteye.com/blog/2379492
精简版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #lookup { margin-top: 50px; border: 1px solid black; cursor: pointer; } #authimg img { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; display: block; } #authimg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); z-index: 9999; display: none; } </style> <script src="http://code.jquery.com/jquery-3.2.1.js" ></script> </head> <body> <button id="lookup" onclick="$('#authimg').fadeIn('slow');">查看</button> <div id="authimg" onclick="$('#authimg').fadeOut('slow');"> <img id="image" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg"> </div> </body> </html>