How to create: Modal images

Modal image

Modal is a dialog/popup window displayed at the top of the current page.

This example uses most of the code from the previous example 'Modal', but in this example, we use an image.

Step 1 - Add HTML:

Baiwa mofe
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- 模态框 -->
<div id="myModal" class="modal">
  <!-- 关闭按钮 -->
  <span class="close">×</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;}
/* The Modal (background) */
.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 (Image) */
.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 {
  animation-name: zoom;
  animation-duration: 0.6s;
}
@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];
// 当用户单击 <span> (x) 时，关闭模态框
span.onclick = function() {
  modal.style.display = "none";
}

Zi jing shi shi yi yi

Xiang guan ye mian

Jiao cheng:Ruan she: Mo dai

Jiao cheng:Ruan she: Mo dai tu ku