Terokai cara membuka tetingkap "modal".

Question

Bagaimanakah saya boleh membuka "tetingkap modal" dengan maklumat tentang produk apabila saya mengklik pada kad. &l

P粉864594965 · Answer

Terdapat beberapa kaedah. Tidak ada betul atau salah di sini sama ada. Kaedah mestilah sesuai untuk permohonan anda. Tidak ada yang salah jika anda sentiasa cuba memastikan kaedah anda agak abstrak.

Dalam contoh di bawah, saya telah menggunakan contoh modal pautan di bawah soalan anda dan membuat pelarasan berikut.

Menambahkan objek data di mana saya menguruskan kandungan modal yang sepadan. Di sini, anda juga boleh menggunakan panggilan API terhadap antara muka.
Saya memberikan EventListener kepada semua butang.
Bahagian boleh ubah dalam modal ditukar dengan kandungan yang sepadan pada klik.

Selesai!

const modalData = [
  {id: 1, title: "标题一", content: "bla"},
  {id: 2, title: "标题二", content: "bla blu"},
];

// 获取模态框
var modal = document.getElementById("myModal");

// 获取打开模态框的按钮
var btns = document.querySelectorAll(".myBtn");

// 获取关闭模态框的元素
var span = document.getElementsByClassName("close")[0];

// 当用户点击按钮时，打开模态框

btns.forEach(b => {
  b.addEventListener('click', (e) => {
    modal.style.display = "block";
    const dataId = e.target.getAttribute("data-id")

    const data = modalData.filter(m => m.id == dataId);

    const modalTitle = document.querySelector("#myModal .title");
    const modalContent = document.querySelector("#myModal .content");
    modalTitle.innerHTML = data[0].title;
    modalContent.innerHTML = data[0].content;
  })
});


// 当用户点击 (x)时，关闭模态框
span.onclick = function() {
  modal.style.display = "none";
}

// 当用户点击模态框之外的任何地方时，关闭模态框
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

body {font-family: Arial, Helvetica, sans-serif;}

/* 模态框（背景） */
.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.4); /* 黑色带透明度 */
}

/* 模态框内容 */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* 添加动画 */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* 关闭按钮 */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}


  



  带有标题和页脚的动画模态框

  
  
  

  
  

    
    
      
        ×
        模态框标题
      
      

      
      
        模态框页脚