【快斗】JavaScript 图片弹窗

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

图片素材：

HTML 代码：

<!-- 触发弹窗 - 图片改为你的图片地址--><imgid="myImg"src="img.jpg"alt="文本描述信息"width="300"height="200"><!-- 弹窗--><divid="myModal"class="modal"><!-- 关闭按钮--><spanclass="close"onclick="document.getElementById('myModal').style.display='none'">&times;</span><!-- 弹窗内容--><imgclass="modal-content"id="img01"><!-- 文本描述--><divid="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:10px0;height:150px;}/* 添加动画*/.modal-content,#caption{ -webkit-animation-name:zoom; -webkit-animation-duration:0.6s;animation-name:zoom;animation-duration:0.6s;} @-webkit-keyframeszoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframeszoom{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%*/@mediaonlyscreenand (max-width: 700px){.modal-content{width:100%;}}

JavaScript 代码：

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

在线演示