Explore how to open a "modal" window

Question

How do I make it open a "modal window" with information about the product when I click on the card. &l

P粉864594965 · Answer

There are several methods. There’s no real right or wrong here either. The method must be suitable for your application. There's nothing fundamentally wrong if you always try to keep your methods somewhat abstract.

In the example below, I've used the link modal example below your question and made the following adjustments.

Added a data object in which I manage the corresponding content of the modal. Here, you can also use API calls against the interface.
I assigned an EventListener to all buttons.
The variable parts in the modal are exchanged with the corresponding content when clicked.

Finish!

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;
}


  



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

  
  
  

  
  

    
    
      
        ×
        模态框标题
      
      

      
      
        模态框页脚