84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
Wie öffne ich ein „modales Fenster“ mit Informationen zum Produkt, wenn ich auf die Karte klicke?
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; }