SOURCE

const blackOverlay = document.createElement('div');
blackOverlay.classList.add('black_overlay');
blackOverlay.id = 'black_overlay';

const enlargeContainer = document.createElement('div');
enlargeContainer.classList.add('enlargeContainer');
enlargeContainer.id = 'enlargeContainer';

document.body.appendChild(blackOverlay);
document.body.appendChild(enlargeContainer);

let toEnlargeImg = document.getElementById('toEnlargeImg');
const imgList = document.querySelectorAll('img');
imgList.forEach(item => { 
    item.addEventListener('click', event => { 
        black_overlay.style.display = 'block';
        enlargeContainer.style.display = 'block';
        let clickImg = new Image();
        clickImg.src = event.target.getAttribute('src');
        clickImg.classList.add('enlargePreviewImg');
        enlargeContainer.appendChild(clickImg);
      console.log(23322332,clickImg.style)
      if (clickImg.style.zoom === '') {
    clickImg.style.zoom = '200%';
  } else {
    clickImg.style.zoom = '';
  }
    });
});
black_overlay.addEventListener('click', function () {
    black_overlay.style.display = 'none';
    enlargeContainer.style.display = 'none';
});

<img style="width: 100%;" alt="图片"      src="https://cdn.ideamake.cn/9591f31c97af8c30c2eca6c3e9d3006a/wx/visitor/avatar/20230711_1034341c384cd55e41458cb5392f1f2d462277.jpg" />      
    
<img src="https://hao123-static.cdn.bcebos.com/cms/2023-1/1673517592818/dd7a1959a077.png" id="toEnlargeImg">

.black_overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
}
.enlargeContainer {
  display: none;
}

.enlargePreviewImg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 200;
}