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

图片素材:

文本描述信息

HTML 代码:

<!-- 触发弹窗 - 图片改为你的图片地址 --><img 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";}

在线演示