学习JavaScript笔记

JavaScript 图片弹窗

介绍如何使用 JavaScript 与 CSS 来创建图片弹窗。

图片素材：

文本描述信息

HTML 代码：

<!-- 触发弹窗 - 图片改为你的图片地址 -->

<img decoding="async" 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";

}