js
//点击图片放大
img.onclick = onclickPhone;
var onclickPhone=function () {
$('.container').append(`<div class="bgM">
<img src="${temp}" id="img_scan" class="img-custom-img2" />
</div>`)
//退出图片预览事件
$('#img_scan').click(function () {
$('#img_scan').remove()
$('.bgM').remove()
})
//阻止事件冒泡
$('#img_scan').onclick = function (event) {
event.stopPropagation();
}
}
css
/*放大图片*/
.bgM {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.85);
overflow: hidden;
}
.bgM img {
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
margin: auto;
}