1.说明
想要点击一下居中展示一张图片,可以使用fixed布局,展示图片的时候背景呈半透明黑色,再点击即隐藏
2.代码
HTML
<div id="div_qr_img"><img id="img" src="" alt=""></div>
css
#div_qr_img {height: 100%;width: 100%;position: fixed;z-index: 100;display: none;background: rgba(0, 0, 0, 0.7); /* 半透明背景 */}#img {width: 300px;height: 300px;display: block;position: absolute;top: 50%;left: 50%;/* 图片宽度高度的一半才能居中 */margin-left: -150px;margin-top: -150px;}
js,需要用到jQuery,自行引入
// Ajax请求之后显示结果function showResult(response) {console.log(response)...if (response["code"] == 3) {// 返回谷歌验证码图片$("#img").prop({"src": "data:image/png;base64," + response["base64"]})$("#div_qr_img").show()}}// 点击隐藏图片$("#div_qr_img").click(function() {$("#div_qr_img").hide()})