Cách tạo: Hình ảnh hộp thoại

Hình ảnh hộp thoại

Hộp thoại là đối thoại hoặc cửa sổ bật lên hiển thị ở đầu trang của trang hiện tại.

Ví dụ này sử dụng phần lớn mã từ ví dụ trước "Hộp thoại", nhưng trong ví dụ này, chúng ta sử dụng hình ảnh.

Bước 1 - Thêm HTML:

<!-- Chuyển đổi hộp thoại -->
<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)}
}
/* Nút đóng */
.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;
}
/* Chiều rộng hình ảnh trên màn hình nhỏ là 100% */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

Bước 3 - Thêm JavaScript:

// Lấy hộp modal
var modal = document.getElementById("myModal");
// Lấy hình ảnh và chèn vào hộp modal - sử dụng văn bản "alt" làm tiêu đề
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;
}
// Lấy thẻ <span> đóng hộp modal
var span = document.getElementsByClassName("close")[0];
// Khi người dùng nhấp chuột vào <span> (x), đóng hộp modal
span.onclick = function() {
  modal.style.display = "none";
}

Thử ngay

Trang liên quan

Giáo trình:Cách tạo mô đun

Giáo trình:Cách tạo thư viện mô đun