当我点击卡片时，如何让它打开一个带有关于产品信息的“模态窗口”。
1
667<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> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
有几种方法。在这里也没有真正的对错之分。 方法必须适合你的应用程序。如果你总是试图保持方法有点抽象，那么没有什么根本上的错误。
在下面的示例中，我使用了你问题下面的链接模态示例，并进行了以下调整。
添加了一个数据对象，我在其中管理模态的相应内容。在这里，你也可以针对接口使用API调用。
我为所有按钮分配了一个EventListener。
在模态中可变的部分在点击时与相应的内容进行交换。
完成！
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">×</span> <h2 class="title">模态框标题</h2> </div> <div class="modal-body content"> </div> <div class="modal-footer"> <h3>模态框页脚</h3> </div> </div> </div> </body>