Cómo crear: imagen modal

Imagen modal

El cuadro modal es un cuadro de diálogo/pantalla emergente que se muestra en la parte superior de la página actual.

Este ejemplo utiliza la mayor parte del código del ejemplo anterior "cuadro modal", pero en este caso, usamos una imagen.

Paso 1 - Añadir HTML:

<!-- Desencadenar cuadro modal -->
<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)}
}
/* Botón de cierre */
.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;
}
/* El ancho de la imagen en pantallas pequeñas es del 100% */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

Tercero - Agregar JavaScript:

// Obtener el cuadro modal
var modal = document.getElementById("myModal");
// Obtener la imagen y agregarla al cuadro modal - usar el texto "alt" como título
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;
}
// Obtener el elemento <span> para cerrar el cuadro modal
var span = document.getElementsByClassName("close")[0];
// Al hacer clic en <span> (x), cerrar el cuadro modal
span.onclick = function() {
  modal.style.display = "none";
}

Prueba personalmente

Páginas relacionadas

Tutoriales:¿Cómo crear un modal

Tutoriales:¿Cómo crear una galería de modal