JavaScript 图片弹窗

​x
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>图片弹窗</title>
  </head>
  <body>
    <!-- 触发弹窗 - 图片改为你的图片地址 -->
<img id="myImg" src="http://www.wallcoo.com/nature/da_ps_landscape_01/wallpapers/1680x1050/%5Bwallcoo_com%5D_april_wallpaper.jpg" alt="beautiful" 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>
  </body>
</html>

HTML

xxxxxxxxxx
 
// 获取弹窗
var modal = document.getElementById('myModal');
//获取图片插入到弹窗
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";
}

JavaScript

xxxxxxxxxx
 
/* 触发弹窗图片的样式*/
#myImg {
  border-radius:5px;
  cursor:pointer;
  transition:0.3x;
}
#myImg:hover{
  opacity:0.7;
}
/*弹窗背景*/
.modal{
  display:none;
  position:fixed;
  z-index:1;
  padding-top:100px;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.9);
}
/*图片*/
.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%;
  }
}

CSS