使用模态 class 而不是 id

Question

我希望在同一页面的多个区域使用下面的模式，但是因为它有 id 元素，所以它只能工作一次，有人可以帮我让它在同一页面上工作多次吗？

我尝试了以下操作，但是当点击按钮时什么也没有打开。

js考克斯

var modal = document.getElementById("myModal");
var btn = document.getElementById(".myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

这里是 html

<button class="myBtn">Open Modal</button>
                <div id="myModal" class="modal">
                  <div class="modal-content">
                    <span class="close">&times;</span>
                    <p><?php echo $row['domainid'];?></p>
                  </div>
                </div>

这是完整的工作 html + js 代码

<button id="myBtn">Open Modal</button>
                <div id="myModal" class="modal">
                  <div class="modal-content">
                    <span class="close">&times;</span>
                    <p><?php echo $row['domainid'];?></p>
                  </div>
                </div>

<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

请有人帮助我。非常感谢

Answer 1

只是您的代码中的一个小错误。您正在使用 getElementById.

选择 class myBtn

旧代码：

var btn = document.getElementById(".myBtn");

新代码：

var btn = document.getElementByClassName("myBtn"); //Don't use . (dot)

或：

var btn = document.querySelector(".myBtn"); //Use . (dot)

Answer 2

getElementsByClassNamereturns元素集合。因此，要为它们中的每一个添加一个事件侦听器，您需要循环该集合。

那么，如果模态一直是按钮的nextElementSibling，就很容易定位到

另一种有用的定位方法是 closest()，我用它来定位 event.target（模态）的父级。

var btns = Array.from(document.getElementsByClassName("myBtn"));
var spans = Array.from(document.getElementsByClassName("close"));

btns.forEach(function(btn) {
  btn.addEventListener("click", function() {
    this.nextElementSibling.style.display = "block";
  })
})

spans.forEach(function(span) {
  span.addEventListener("click", function() {
    this.closest(".modal").style.display = "none";
  })
})

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

.modal {
  display: none;
}

<button class="myBtn">Open Modal 1</button>
<div class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>
      Hello 1
    </p>
  </div>
</div>

<hr>

<button class="myBtn">Open Modal 2</button>
<div class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>
      Hello 2
    </p>
  </div>
</div>

<hr>

<button class="myBtn">Open Modal 3</button>
<div class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>
      Hello 3
    </p>
  </div>
</div>

使用模态 class 而不是 id

Use modal class instead of id

html

javascript

jquery

modal-dialog