使用JavaScript設置多個彈出窗口的最有效方法是什么？

Question

我正在嘗試找出問題，並且不確定如何使用javascript正確設置多個彈出窗口。 這確實是我第一次在網站上使用javascript，但不確定如何繼續。

因此，在網站上，我有一堆按鈕，每個按鈕都應鏈接到特定的彈出窗口。 第一個按鈕效果很好，因為會出現彈出窗口，並且其中的內容顯示並正常工作（這是我已設置的下拉菜單）。

現在，我如何為其他按鈕設置其他彈出窗口？ 克隆HTML時，是否需要為每個按鈕創建一個新的javascript文件並進行相應引用？ 與CSS相同嗎？ 如何正確設置？

 ; (function($) { $(document).ready(function() { // Get the modal var modal = document.getElementById('myModal'); // Get the button that opens the modal var btn = document.getElementById("learn-more-popup"); // 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"; } } var acc = document.getElementsByClassName("accordion-coach"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } }); })(jQuery); 

 #learn-more-popup { max-width: 180px; width: 100%; display: block; background: #2078bc; font-family: Muli; color: #fff; font-weight: 700; font-size: 22px; letter-spacing: -1px; border: 0px solid #1e2027; padding: 8px 8px; border-radius: 5px; box-shadow: 3px 3px 1px #000; cursor: pointer; } .coach-photo img { border: 2px solid #000080 !important; } /* ----- Accordian ----- */ .accordion-coach { background-color: #000080; color: #ffffff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 1em; font-weight: 600; transition: 0.4s; margin-bottom: 15px; } .accordion-coach:hover { background-color: #000000; color: #ffffff; } .accordion-coach:after { content: '\\002B'; color: #ffffff; font-weight: bold; float: right; margin-left: 5px; } .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } /* ----- Modal Background ----- */ .modal { display: none; position: fixed; z-index: 999; 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.5); } /* ----- Modal Content ----- */ .modal-content { background-color: #f0f0f0; margin: auto; padding: 0px 30px 16px 30px; border: 1px solid #888; width: 50%; overflow-y: scrollbar !important; overflow: auto !important; max-height: 400px !important; } @media only screen and (max-width: 992px) { .modal { display: none; position: fixed; z-index: 1; padding-top: 50px; } .modal-content { width: 90% !important; margin: auto; padding: 20px; height: 100%; max-height: 600px !important; } } /* ----- Close Button ----- */ .close { color: #000000; float: right; font-size: 28px; font-weight: 600; margin-top: 10px; margin-bottom: 10px; } .close:hover, .close:focus { color: #000080; text-decoration: none; cursor: pointer; } 

 <button id="learn-more-popup">Learn More</button> <div id="myModal-1" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">&times;</span> <button class="accordion-coach">About Me</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div> <button class="accordion-coach">Learn More</button> <div class="panel"> <strong>Am I your Ideal Coach?</strong> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p> </div> <button class="accordion-coach">Schedule A Call</button> <div class="panel"> <strong>Schedule a 15-minute consultation:</strong> <br> <a href="#" target="_blank">Click here</a></p> </div> <button class="accordion-coach">Hire This Coach</button> <div class="panel"> <p>#</p> </div> </div> </div> <script src="/public_html/wp-content/themes/bridge-child/custom.js"></script> 

Answer 1

有很多方法可以解決此問題。 最快，最骯臟的方法可能就是只復制每個實例的彈出窗口，然后按照自己的方式對它們進行編碼。 但是，這很臟而且不可重用。

更好的方法是對彈出html文件做一個簡單的模板，並將其放在js函數中。 然后，您可以在每次單擊按鈕時呈現一個新的彈出實例。 就像是：

function myPopup (bodyText) {
  //create popup html content
  //append new popup html to the body
}

var somePopup = new myPopup('something');

盡管這是一種通用的工作方式，但它會進入構建組件的思維方式，這是所有主要框架都試圖以最佳方式實現的目標。 一旦有了基本功能，只需最少的需求，就可以嘗試添加內部方法，例如remove方法，update方法等，以使其更強大。

搜索有關原始javascript組件和html模板的教程以查看不同的想法和模式也將是有益的。