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