原生js实现点击图片全屏预览

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显示过渡效果。