84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
當我點擊卡片時，如何讓它打開一個帶有關於產品資訊的「模態視窗」。
Plugin 25.00 BRL Comprar Agora!
有幾種方法。這裡也沒有真正的對錯。 方法必須適合你的應用程式。如果你總是試圖保持方法有點抽象，那麼沒有什麼根本上的錯誤。
在下面的範例中，我使用了你問題下面的連結模態範例，並進行了以下調整。
新增了一個資料對象，我在其中管理模態的相應內容。在這裡，你也可以針對介面使用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; }
带有标题和页脚的动画模态框 打开模态框 1 打开模态框 2 × 模态框标题
有幾種方法。這裡也沒有真正的對錯。 方法必須適合你的應用程式。如果你總是試圖保持方法有點抽象，那麼沒有什麼根本上的錯誤。
在下面的範例中，我使用了你問題下面的連結模態範例，並進行了以下調整。
新增了一個資料對象，我在其中管理模態的相應內容。在這裡，你也可以針對介面使用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; }