Javascript 弹出窗口 - 需要创建类并将事件绑定(bind)到 document.getElementsByClassName 返回的每个元素

Question

我在我的网站上创建了一个弹出窗口，它被分配给三个按钮，但所有按钮上的 ID 相同，因此当我单击第三个按钮打开弹出窗口时，它会显示第一个弹出窗口，与第二个按钮相同。

我已经提出了一个类似的问题，但是根据我得到的反馈和答案，我无法实现它们，因为我是 JavaScript 新手，没有太多经验，所以我花了几个小时试图修复它，我我仍然没有运气。

这是 JavaScript:

var modal = document.getElementById('myModal');

var btns = document.getElementsByClassName("myBtn");

var showModal = function() {
    modal.style.display = "block";
};

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', showModal, false);
}

var span = document.getElementsByClassName("close")[0];


span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
    }

这是 html:

<footer class="panel-footer">
  <div class="btn btn-block btn-lg btn-default">
    <button id="myBtn">Sign up now</button>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">×</span>
          <h2><img src="http://localhost:8383/homepage/img/logo.png" style="width:250px"></h2>
        </div>

        <div class="modal-body">
          <h4><b><u>Sign up for a basic subscription</u></b></h4><br>
          <form method="post" action="contact_basic.php" name="contactform" id="contactform">
            <div class="results"></div>
            <div class="row">
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="sr-only">Name</label>
                  <input name="name" type="text" class="form-control input-lg" placeholder="Name" required>
                </div>
                <div class="form-group">
                  <label class="sr-only">Email</label>
                  <input name="email" type="email" class="form-control input-lg" placeholder="Email" required>
                </div>

              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="sr-only">Phone Number</label>
                  <input name="phone" type="number" class="form-control input-lg" placeholder="Phone Number" required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="sr-only">Organization Name</label>
                  <input name="orgName" type="text" class="form-control input-lg" placeholder="Organization Name">
                </div>
              </div>
              <div class="col-sm-3 col-xs-12">
                <button id="submit" type="submit" align="center" class="btn btn-danger btn-lg btn-block">Send</button>
              </div>
            </div>
            </div>
        </div>
      </div>
    </div>
</footer>

Answer 1

<强> Working fiddle

id 属性在同一文档中应该是唯一的，因此您可以将这些 id 替换为 class 属性，例如:

<button id="myBtn">Sign up now</button>

将是:

<button class="myBtn">Sign up now</button>

然后在你的js中将点击事件附加到该类的所有元素:

var btns = document.getElementsByClassName("myBtn");

var showModal = function() {
    modal.style.display = "block";
};

for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', showModal, false);
}

希望这有帮助。