چگونه ایجاد می‌شود: تصویر موقت

تصویر موقت

مدل یک دیالوگ/پنجره پاپ‌آپ است که در بالای صفحه فعلی نمایش داده می‌شود.

این مثال از بیشتر کد قبلی مثال "پنجره موقت" استفاده می‌کند، فقط در این مثال، ما از تصویر استفاده کرده‌ایم.

قدم اول - اضافه کردن 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%;
  }
}

مرحله سوم - اضافه کردن 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";
}

آزمایش کنید

صفحات مرتبط

آموزش:چگونه به عمل آوریم: ایجاد مدل

آموزش:چگونه به عمل آوریم: ایجاد گالری مدل