Web实现模态框

Web实现模态框

点击实现模态框，在模态框里实现各种操作。下面是预览图。

实现方法：

html

<div class="container">
    <p>作为一名资深吃货，我的梦想是：吃不胖然后吃遍天下！那么你呢？</p>
    <!-- 触发器 -->
    <div id="img-box">
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/chnrou.png" alt="菜1"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/cjun.png" alt="菜2"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/dzhhui.png" alt="菜3"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/gbfen.png" alt="菜4"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/hycha.png" alt="菜5"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/mdfu.png" alt="菜6"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/sfan.png" alt="菜7"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/xhlrou.png" alt="菜8"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/yzhba.png" alt="菜9"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/cba.png" alt="菜10"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/xbdfu.png" alt="菜11"></a></div>
      <div class="grid-item"><a href="#"><img class="real-img" src="./images/zjya.png" alt="菜12"></a></div>
    </div>
  </div>  
<!-- 模态框 -->
  <div id="modal-box">
    <!-- 内容 -->
    <div id="modal-container">
      <!-- 关闭按钮 -->
      <span id="close">×</span>
      <img id="insert-img">
      <p id="insert-title"></p>
    </div>
  </div>

css

/* 遮罩 */
#modal-box {
/* 定位、设置透明度、设置显示层 */
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.7);
  top: 0px;
  left: 0px;
  z-index: 1;
}

#modal-container {
   /* 模态框显示，垂直居中定位 */
  width: 720px;
  height: 480px;
  background-color: #f6f6f6;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
}

/* 自定义内容样式 */
#insert-img {
  display: block;
  margin: 10px;
  height: 150px;
  width: 225px;
}

#close {
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  top: 5px;
  right: 2%;
  color: #6e6e6e;
}

#insert-title {
  font-size: 30px;
}

js

var imgs = document.getElementsByClassName("real-img");
var modalImg = document.getElementById("insert-img");
var modalBox = document.getElementById("modal-box");
var closeBtn = document.getElementById("close");
var modalTitle = document.getElementById("insert-title");

for (let img of imgs) {
  img.addEventListener('click', function () {
    // 显示操作
    modalBox.style.display = 'block';
    modalImg.src = this.src;
    modalTitle.innerHTML = this.alt;
  })
}

closeBtn.onclick = function () {
  modalBox.style.display = 'none';
}

想要特效操作可以添加动画，比如淡出：

#modal-container {
    animation: grad 1s;
}

@keyframes grad {
  from {
    transform: scale(0.1);
  }

  to {
    transform: scale(1);
  }
}

关键：遮罩层、模态框