使用 getElementsByClassName 打开模式不起作用

Question

我的网站上有一个模式。我需要在我的所有页面中使用该模式。所以我不能在模态脚本中使用 ID。这是我的js代码var modal = document.getElementById('demo-modal');var btn = document.getElementById('open-modal');var close = modal.getElementsByClassName('close')[0];btn.onclick = function() {  modal.style.display = 'block';};close.onclick = function() {  modal.style.display = 'none';};window.onclick = function(event) {  if (event.target == modal) {    modal.style.display = 'none';  }};然后我将上面的 getElementById 更改为 getElementsByClassName 并且我的 html 将 ID 更改为类，但它根本不起作用。var modal = document.getElementsByClassName('demo-modal');var btn = document.getElementsByClassName('open-modal');var close = modal.getElementsByClassName('close')[0];这是小提琴。有任何想法吗？

Answer 1

干得好：

getElementsByClassName行为不同于getElementById. getElementsByClassName：这将返回具有指定类名的元素子元素的集合，作为 NodeList 对象。

var modal = document.getElementsByClassName('modal')[0];

var btn = document.getElementsByClassName('open-modal')[0];

var close = modal.getElementsByClassName('close')[0];

btn.onclick = function() {

  modal.style.display = 'block';

};

close.onclick = function() {

  modal.style.display = 'none';

};

window.onclick = function(event) {

  if (event.target == modal) {

    modal.style.display = 'none';

  }

};

.modal {

  display: none;

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  overflow: auto;

  background: rgba(0, 0, 0, 0.8);

  z-index: 99999;

  animation-name: show;

  animation-duration: 0.5s

}

.modal-content {

  position: relative;

  background-color: #fff;

  margin: 10% auto;

  border: 1px solid #888;

  width: 80%;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}

@keyframes show {

  0% {

    display: none;

    opacity: 0;

  }

  100% {

    display: block;

    opacity: 1;

  }

}

.modal-header {

  padding: 12px;

  background-color: grey;

  color: white;

}

.modal-body {

  padding: 12px;

}

.modal-footer {

  position: relative;

  background-color: #fefefe;

  margin: auto;

  padding: 12px;

}

.close {

  color: #aaa;

  float: right;

  font-size: 16px;

}

.close:hover,

.close:focus {

  color: black;

  cursor: pointer;

}

<button class="open-modal" name="open-modal-btn">Open Modal</button>

<div class="modal demo-modal">

  <div class="modal-content">

    <div class="modal-header">

      <span class='close'>X</span>

      <h2>Modal Header</h2>

    </div>

    <div class="modal-body">

      <p>Some text in the Modal Body</p>

      <p>Some other text...</p>

    </div>

    <div class="modal-footer">

      <h3>Modal Footer</h3>

    </div>

  </div>

</div>