ਕਿਵੇਂ ਬਣਾਉਣਾ: ਮੋਡਲ ਚਿੱਤਰ

ਮੋਡਲ ਚਿੱਤਰ

ਮੋਡਲ ਹੈ ਜੋ ਮੌਜੂਦਾ ਪੰਨੇ ਦੀ ਸਿਰਫ ਤਹਿਤ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ ਅਤੇ ਪੈਸੰਡ ਵਾਲਾ ਵਿੰਡੋ ਹੈ。

ਇਹ ਉਦਾਹਰਣ ਪਿਛਲੇ ਉਦਾਹਰਣ "ਮੋਡਲ ਬਾਕਸ" ਦਾ ਮੋਟਾ ਤੌਰ 'ਤੇ ਕੋਡ ਵਰਤਦਾ ਹੈ, ਪਰ ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਅਸੀਂ ਚਿੱਤਰ ਵਰਤ ਰਹੇ ਹਾਂ。

ਕਦਮ 1 - HTML ਜੋੜੋ:

<!-- 触发模态框 -->
<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%;
  }
}

ਤੀਜਾ ਕਦਮ - ਜਾਵਾਸਕ੍ਰਿਪਟ ਜੋੜੋ:

// 获取模态框
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";
}

亲自试一试

相关页面

教程：如何创建模态

教程：如何创建模态图库