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模板的教程以了解不同的想法和模式也将是有益的。

使用JavaScript设置多个弹出窗口的最有效方法是什么？

1 个答案: