如何创建一组模态？
[英]How can I create a set of modals?
问题描述
我想创建多个按钮，每个按钮使用下面的代码逻辑或其他类似的方式打开一个不同的模式来实现这一点。
我不想使用任何库或框架，只是普通的 Javascript。
// Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("myBtn"); // Get the <span> element that closes the modal var 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 modal span.onclick = function() { modal.style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width; initial-scale=1"> </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> </body> </html>
1 个解决方案
解决方案1
0 2021-05-12 13:34:00
你可以试试这个方法
// Get the modal var modal = document.getElementsByName("modal"); function openmodal(id) { document.getElementById(id).style.display = "block"; } function closemodal(id) { document.getElementById(id).style.display = "none"; } // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }
.modal{ display:none;}
<h2>Modal Example</h2> <;-- Trigger/Open The Modal --> <button onclick="openmodal('myModal')"> Open Modal</button> <button onclick="openmodal('myModal2')"> Open Modal2</button> <.-- The Modal --> <div id="myModal" class="modal"> <.-- Modal content --> <div class="modal-content"> <span class="close" onclick="closemodal('myModal')">×</span> <p>Some text in the Modal..</p> </div> </div> <!-- The Modal --> <div id="myModal2" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close" onclick="closemodal('myModal2')">×</span> <p>Some text in the Modal222</p> </div> </div>
如何调整模态大小？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.