Comment faire ouvrir une "fenêtre modale" avec des informations sur le produit lorsque je clique sur la carte.
<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>
Il existe plusieurs méthodes. Il n’y a pas vraiment de bien ou de mal ici non plus. La méthode doit être adaptée à votre application. Il n'y a rien de fondamentalement mauvais si vous essayez toujours de garder vos méthodes quelque peu abstraites.
Dans l'exemple ci-dessous, j'ai utilisé l'exemple modal de lien sous votre question et effectué les ajustements suivants.
Ajout d'un objet de données dans lequel je gère le contenu correspondant du modal. Ici, vous pouvez également utiliser des appels API sur l'interface.
J'ai attribué un EventListener à tous les boutons.
Les parties mutables du modal sont échangées avec le contenu correspondant au clic.
Fait !
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"; } }