html:
<div class="image">
<img src="./Image/doctor_avatar.jpg" alt="">
</div>
<div class="popup">
<img src="" alt="">
</div>
css:
.image img{
width: 200px;
height: 200px;
}
.popup{
z-index: 99;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
opacity: 0;
text-align: center;
transition: all 0.5s;
background-color: rgba(0, 0, 0, 0.5);
}
.popup img{
width: auto;
height: 100%;
}
js:
let popup = document.querySelector('.popup');
//点击图片
document.querySelector(".image img").addEventListener('click',function (e) {
let img = document.querySelector('.popup img');
img.src = "./Image/doctor_avatar.jpg";
popup.style.display = 'block';
setTimeout(() => {
popup.style.opacity = 1
}, 100);
})
// 点击整个弹出层
popup.addEventListener('click', function () {
this.style.display = "none";
this.style.opacity = "0"
})
display变化时transition不起效果,可以设置定时器,等display为block时由opacity显示过渡效果。