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

我在我的网站上做了一个弹出窗口，它被分配给三个按钮，但我在所有按钮上都有相同的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";
    }
    }

var modal=document.getElementById（'myModal'）；
var btns=document.getElementsByClassName（“myBtn”）；
var showModal=函数（）{
modal.style.display=“块”；
};
对于（变量i=0；i

以下是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>

现在就报名吧
×
注册基本订阅

名称
电子邮件
电话号码
机构名称
发送

id

属性在同一文档中应该是唯一的，因此您可以用

class

属性替换这些id，例如：

<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);
}

var btns=document.getElementsByClassName（“myBtn”）；
var showModal=函数（）{
modal.style.display=“块”；
};
对于（变量i=0；i

---

希望这能有所帮助。

非常感谢您对Zakaria的帮助。它确实起作用了，弹出窗口现在可以在所有按钮上打开，但是当我在第二个和第三个按钮上打开弹出窗口时，它会从第一个按钮打开同一个弹出窗口，而且弹出窗口在打开时不会关闭，所以我必须刷新页面，我会尝试修复此问题，但是如果你知道此问题的快速修复方法，请让我知道：）再次感谢你不客气，兄弟，很高兴我能帮上忙，你有几个具有相同

id

的modals吗？所以我更改了代码，现在它在单击时关闭，但当我单击三个弹出窗口时，我仍然会看到第一个。这些表单在html中具有相同的id。我试着为表单创建一个类，但对我来说不起作用。我在想，也许我可以加入一个if语句来确定弹出窗口获得哪个id。我现在将把我的javascript更改放在问题中。干得好，请与您核对。。另外，如果您可以创建一个包含其他表单的完整代码的提琴，那么我可以检查它。如果你想编辑和更新这一条。：）干得好，现在把链接传给我，它将在酒吧地址中更新。。