小兔网

JavaScript 图片弹窗

说明
分类：计算机

本文我们为大家介绍如何使用 JavaScript 与 CSS 来创建图片弹窗。

图片素材：

文本描述信息

HTML 代码：

<!-- 触发弹窗 - 图片改为你的图片地址 --><img loading="lazy" id="myImg" src="img.jpg" alt="文本描述信息" width="300" height="200"> <!-- 弹窗 --><div id="myModal" class="modal">   <!-- 关闭按钮 -->  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>   <!-- 弹窗内容 -->  <img class="modal-content" id="img01">   <!-- 文本描述 -->  <div id="caption"></div></div>

CSS 代码：

/* 触发弹窗图片的样式 */#myImg {    border-radius: 5px;    cursor: pointer;    transition: 0.3s;} #myImg:hover {opacity: 0.7;} /* 弹窗背景 */.modal {    display: none; /* Hidden by default */    position: fixed; /* Stay in place */    z-index: 1; /* Sit on top */    padding-top: 100px; /* Location of the box */    left: 0;    top: 0;    width: 100%; /* Full width */    height: 100%; /* 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 */} /* 图片 */.modal-content {    margin: auto;    display: block;    width: 80%;    max-width: 700px;} /* 文本内容 */#caption {    margin: auto;    display: block;    width: 80%;    max-width: 700px;    text-align: center;    color: #ccc;    padding: 10px 0;    height: 150px;} /* 添加动画 */.modal-content, #caption {     -webkit-animation-name: zoom;    -webkit-animation-duration: 0.6s;    animation-name: zoom;    animation-duration: 0.6s;} @-webkit-keyframes zoom {    from {-webkit-transform:scale(0)}     to {-webkit-transform:scale(1)}} @keyframes zoom {    from {transform:scale(0)}     to {transform:scale(1)}} /* 关闭按钮 */.close {    position: absolute;    top: 15px;    right: 35px;    color: #f1f1f1;    font-size: 40px;    font-weight: bold;    transition: 0.3s;} .close:hover,.close:focus {    color: #bbb;    text-decoration: none;    cursor: pointer;} /* 小屏幕中图片宽度为 100% */@media only screen and (max-width: 700px){    .modal-content {        width: 100%;    }}

JavaScript 代码：

// 获取弹窗var modal = document.getElementById('myModal'); // 获取图片插入到弹窗 - 使用 "alt" 属性作为文本部分的内容var img = document.getElementById('myImg');var modalImg = document.getElementById("img01");var captionText = document.getElementById("caption");img.onclick = function(){    modal.style.display = "block";    modalImg.src = this.src;    captionText.innerHTML = this.alt;} // 获取 <span> 元素，设置关闭按钮var span = document.getElementsByClassName("close")[0]; // 当点击 (x), 关闭弹窗span.onclick = function() {   modal.style.display = "none";}