我正在使用这个 CSS/JS 模式，我想知道是否有任何方法可以将数据传递到模式，就像我们在引导模式中使用数据切换一样。我将在 PHP while 循环中使用它，以便打印不同的按钮，并且我想在单击该按钮后将数据传递到模式，以便与该行关联的数据将传递到模式或在单击后打印在按钮上。 ....是否可以使用这种类型的模态？<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;}/* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */}/* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%;}/* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold;}.close:hover,.close:focus { color: #000; text-decoration: none; cursor: pointer;}</style></head><body><h2>Modal Example</h2><!-- Trigger/Open The Modal --><button id="myBtn">Open Modal</button><!-- The Modal --><div id="myModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div></div><script>// Get the modalvar modal = document.getElementById("myModal");// Get the button that opens the modalvar btn = document.getElementById("myBtn");// Get the <span> element that closes the modalvar span = document.getElementsByClassName("close")[0];// When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block";}// When the user clicks on <span> (x), close the modalspan.onclick = function() { modal.style.display = "none";}
1 回答
拉丁的传说
TA贡献1789条经验 获得超8个赞
您只需将data-*属性添加到模式的主容器中即可稍后使用。
<div id="myModal" class="modal" data-foo="bar"> <!-- ... --> </div>
// Get the modal
var modal = document.getElementById("myModal");
/*...*/
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
// append data-foo value to the modal's content
modal.querySelector('.modal-content p').innerText = modal.dataset.foo;
}
以下是数据集如何工作的示例： https: //codepen.io/kmsdevnet/pen/ExggvyP
数据集文档： https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset
添加回答
举报
0/150
提交
取消