Explore how to open a "modal" window
P粉277464743
P粉277464743 2023-09-09 21:27:12
0
1
438

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

<div class="card">

            <div class="imgBox">
            <img src="./img/bau.png" alt="Produto" class="mouse">
            </div>
        
            <div class="contentBox">
            <h3>Plugin</h3>
            <h2 class="price">25.<small>00</small> BRL</h2>
            <a href="#" class="buy">Comprar Agora!</a>
            </div>
        
        </div>
P粉277464743
P粉277464743

reply all(1)
P粉864594965

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.

  1. Added a data object in which I manage the corresponding content of the modal. Here, you can also use API calls against the interface.

  2. I assigned an EventListener to all buttons.

  3. 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;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

  <h2>带有标题和页脚的动画模态框</h2>

  <!-- 触发/打开模态框的按钮 -->
  <button class="myBtn" data-id="1">打开模态框 1</button>
  <button class="myBtn" data-id="2">打开模态框 2</button>

  <!-- 模态框 -->
  <div id="myModal" class="modal">

    <!-- 模态框内容 -->
    <div class="modal-content">
      <div class="modal-header">
        <span class="close">&times;</span>
        <h2 class="title">模态框标题</h2>
      </div>
      <div class="modal-body content">

      </div>
      <div class="modal-footer">
        <h3>模态框页脚</h3>
      </div>
    </div>

  </div>

</body>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template