当前位置：首页 > JavaScript

js实现弹出图片

2026-03-01 06:08:30JavaScript

使用HTML和JavaScript实现图片弹出功能

通过创建一个模态框（Modal）来显示点击后的放大图片。以下是一个完整的实现示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container img {
            width: 200px;
            cursor: pointer;
            transition: 0.3s;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9);
        }

        .modal-content {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }

        .close {
            position: absolute;
            top: 15px;
            right: 35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>

<h2>点击图片弹出</h2>

<div class="image-container">
    <img id="myImg" src="your-image.jpg" alt="示例图片">
</div>

<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01">
</div>

<script>
    var modal = document.getElementById("myModal");
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");

    img.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
    }

    var span = document.getElementsByClassName("close")[0];

    span.onclick = function() { 
        modal.style.display = "none";
    }
</script>

</body>
</html>

使用第三方库实现图片弹出

如果需要更丰富的功能（如相册浏览、动画效果等），可以考虑使用以下流行库：

Lightbox2


<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

```

Fancybox


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>

```

纯CSS实现方案

对于简单的需求，可以使用CSS的:target伪类实现无JavaScript的弹出效果：

<style>
    #image-popup {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        display: none;
    }

    #image-popup:target {
        display: block;
    }

    .popup-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<a href="#image-popup">
    <img src="thumbnail.jpg" width="200">
</a>

<div id="image-popup">
    <a href="#">
        <div class="popup-content">
            <img src="fullsize.jpg">
        </div>
    </a>
</div>

响应式图片弹出方案

确保弹出图片在不同设备上都能良好显示：

function showPopup(imageSrc) {
    const popup = document.createElement('div');
    popup.style.position = 'fixed';
    popup.style.top = '0';
    popup.style.left = '0';
    popup.style.width = '100vw';
    popup.style.height = '100vh';
    popup.style.backgroundColor = 'rgba(0,0,0,0.9)';
    popup.style.display = 'flex';
    popup.style.justifyContent = 'center';
    popup.style.alignItems = 'center';
    popup.style.zIndex = '1000';

    const img = document.createElement('img');
    img.src = imageSrc;
    img.style.maxWidth = '90vw';
    img.style.maxHeight = '90vh';
    img.style.objectFit = 'contain';

    popup.appendChild(img);
    document.body.appendChild(popup);

    popup.addEventListener('click', () => {
        document.body.removeChild(popup);
    });
}

// 使用方法
document.querySelectorAll('.popup-image').forEach(img => {
    img.addEventListener('click', () => {
        showPopup(img.src);
    });
});