點擊文字彈出圖片層 - 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>