چگونه ایجاد می‌شود: عکس منجمد

عکس منجمد

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

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

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

آزمایش کنید

صفحات مرتبط

آموزش:کيف مودال را خلق کنيم؟

آموزش:کيف گالري مودال را خلق کنيم؟