當我點擊卡片時,如何讓它打開一個帶有關於產品資訊的「模態視窗」。
<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>
有幾種方法。這裡也沒有真正的對錯。 方法必須適合你的應用程式。如果你總是試圖保持方法有點抽象,那麼沒有什麼根本上的錯誤。
在下面的範例中,我使用了你問題下面的連結模態範例,並進行了以下調整。
新增了一個資料對象,我在其中管理模態的相應內容。在這裡,你也可以針對介面使用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"; } }