<div id="image-gallery"> 内容图片 </div>  

<script>

// 假设你的div有一个id为"image-gallery"

document.getElementById('image-gallery').addEventListener('click', function(event) {

    // 确保点击的是图片

    if (event.target && event.target.nodeName === 'IMG') {

        // 阻止点击事件冒泡

        event.stopPropagation();

 

        // 创建并显示弹窗

        const imgSrc = event.target.src;

        const imgAlt = event.target.alt || '';

        const popup = document.createElement('div');

        popup.className = 'popup';

        popup.innerHTML = `<img src="${imgSrc}" alt="${imgAlt}">`;

        document.body.appendChild(popup);

 

        // 添加关闭按钮

        const closeButton = document.createElement('span');

        closeButton.className = 'close';

        closeButton.innerHTML = '&times;';

        popup.appendChild(closeButton);

 

        // 关闭弹窗的事件监听

        closeButton.addEventListener('click', function() {

            popup.parentNode.removeChild(popup);

        });

 

        // 显示弹窗

        popup.style.display = 'block';

    }

});

</script> 

<style>

/* 弹窗样式 */

.popup {

     display: none;

    position: fixed;

    z-index: 1;

   padding-top: 100px; /* Location of the box */

   left: 30%;

   top: 13%;

  transform: translate(-30%, -10%);

  width: 100%; /* Full width */

  height: 75%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */}

 

.popup img {

    margin-top: -100px;

  display: block;

 

 max-width: 100%;

  height: auto;

}

/* 关闭按钮样式 */

.close {

    position: absolute;

    top: 10px;

    right: 10px;

    color: #f1f1f1;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    background-color: rgba(0, 0, 0, 0.8);

    padding: 12px;

    border-radius: 50%;

}

 

.close:hover,

.close:focus {

    color: #ff0000;

    text-decoration: none;

    outline: none;

}

 </style>