使用模态类而不是 id答案

【问题标题】：Use modal class instead of id使用模态类而不是 id
【发布时间】：2022-01-15 16:06:32
【问题描述】：

我希望在同一页面的多个区域中使用以下模式，但由于它具有 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>

请有人帮帮我。非常感谢提前

【问题讨论】：

标签： javascript html jquery modal-dialog

【解决方案1】：

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

那么，如果modal一直是按钮的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>

【讨论】：

我面临的一个小问题是，通过单击屏幕上的任意位置，模式会关闭。不是只有点击X吗？
尝试删除window.onclick函数。

【解决方案2】：

只是代码中的一个小错误。您正在使用getElementById 选择课程myBtn。

旧代码：

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

新代码：

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

或者：

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

【讨论】：

仍然只打开一次。
你在 DOM 中使用了多少次带有class="myBtn" 的按钮？因为上面的代码只选择了 DOM 中的第一个元素，并且只对它应用了函数。
而document.getElementByClassName 没有定义：-\