Question

我已经采用了一个工作脚本并对其进行了调整，以允许多个独立的模态，我不再能够关闭任何模态。我收到错误：

无法在HTMLSpanElement.span.onclick中设置未定义的属性'display'

window.onclick或document.onclick功能都不起作用。 Here's the jsfiddle

{{1}}

Answer 1

modal是HTMLCollection（类似对象的数组），因为您有多个元素的类popupModal。所以你需要遍历数组并为所有人设置display = none。

此外，您仅为第一个click元素指定了close，因此您需要遍历span元素，并为两个span元素附加click以关闭两个模态窗口。

或者，如果modal为event.target，您可以遍历span数组并附加事件监听器以关闭模式。

var modal = document.getElementsByClassName('popupModal');
var btn = document.getElementsByClassName("popupBtn");
var span = document.getElementsByClassName("close");

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i];
  thisBtn.addEventListener("click", function() {
    var modal = document.getElementById(this.dataset.modal);
    modal.style.display = "block";
  }, false);
}


for (var i = 0; i < modal.length; i++) {
  modal[i].addEventListener("click", function(e) {
    if(e.target.className === 'close') {
      this.style.display = 'none';
    }
  }, false);
}

.popupBtn {
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.modalContent {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border-top: 8px solid #81c8e8;
  border-radius: 4px;
  width: 50%;
  box-shadow: 0px 2px 8px #222;
  cursor: default;
  font-size: .9em;
}

.close {
  color: #ccc;
  float: right;
  font-size: 25pt;
  font-weight: bold;
  transition: ease-in-out .5s;
  padding: 10px 30px;
  background-color: #2b3d52;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

<div class="contentSection">
  <a class="popupBtn" data-modal="modal-window-one">Open Me!</a>
</div>

<div id="modal-window-one" class="popupModal modal">
  <span class="close">&times;</span>
  <div class="modalContent">
    <p>
      Here's some content!
    </p>
  </div>
</div>

<div class="contentSection">
  <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a>
</div>

<div id="modal-window-two" class="popupModal modal">
  <span class="close">&times;</span>
  <div class="modalContent">
    <p>
      Here's some different content!
    </p>
  </div>
</div>

Answer 2

我在你的代码中看到了一些不正确的事情：

1）您使用了两次var modal

2）您订阅的onclick只有一个<span></span>

3）var model = document.getElementsByClassName('popupModal');实际上会返回 HTMLCollection 和此代码：

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

永远不会工作（你需要考虑重构它）

所以你需要捕获两个跨度的click，它应该可以工作

var modals = document.getElementsByClassName('popupModal');
var btns = document.getElementsByClassName("popupBtn");
var spans = document.getElementsByClassName("close");

for (var i = 0; i < btns.length; i++) {
  var thisBtn = btns[i];
  thisBtn.addEventListener("click", function() {
    var m = document.getElementById(this.dataset.modal);
    m.style.display = "block";
  }, false);
}

for (var i = 0; i < spans.length; i++) {
  var thisSpan = spans[i];
  thisSpan.addEventListener("click", function() {
  	this.parentNode.style.display = "none";
  }, false);
}

.popupBtn {
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.modalContent {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border-top: 8px solid #81c8e8;
  border-radius: 4px;
  width: 50%;
  box-shadow: 0px 2px 8px #222;
  cursor: default;
  font-size: .9em;
}

.close {
  color: #ccc;
  float: right;
  font-size: 25pt;
  font-weight: bold;
  transition: ease-in-out .5s;
  padding: 10px 30px;
  background-color: #2b3d52;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

<div class="contentSection">
  <a class="popupBtn" data-modal="modal-window-one">Open Me!</a>
</div>

<div id="modal-window-one" class="popupModal modal">
  <span class="close">&times;</span>
  <div class="modalContent">
    <p>
      Here's some content!
    </p>
  </div>
</div>

<div class="contentSection">
  <a class="popupBtn" data-modal="modal-window-two">...Or Open Me!</a>
</div>

<div id="modal-window-two" class="popupModal modal">
  <span class="close">&times;</span>
  <div class="modalContent">
    <p>
      Here's some different content!
    </p>
  </div>
</div>

模态“关闭”不起作用

2 个答案: