Question

当我点击注册按钮时，我试图制作一个简单的模态弹出窗口。通过将display: none更改为display: block，模式可以正常打开，但我无法通过点击<span>标记来关闭它。

点击事件不会在<span>上触发，但在点击容器外部时会触发。我不知道为什么。我做错了什么？

这是HTML：

<a id="modalBtn" href="#0">Get started</a>
  <div id="modalPopup" class="modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div>
        <input id="email" type="email" placeholder="Email">
        <input id="password" type="password" placeholder="Password">
        <button id="quickstart-sign-in" href="#">Log in</button>
        <button id ="quickstart-sign-up" href="#">Sign up</button>
      </div>
    </div>
  </div>

和JS：

var modalPopup = document.getElementById('modalPopup');
var modalBtn = document.getElementById('modalBtn');
var close = document.getElementsByClassName('close');

// Opens modal on modalBtn click
modalBtn.onclick = function() {
modalPopup.style.display = "block";
}

// Closes the modal on 'X' click
close.onclick = function() {
modalPopup.style.display = "none";
console.log('wtf why is this not working')
}

// Closes the modal on outside window click
window.onclick = function(event) {
  if (event.target == modalPopup) {
    modalPopup.style.display = "none";
  }
}

这是一个小提琴：https://jsfiddle.net/3n1mpaex/1/

很抱歉，如果之前有人询问，我会搜索一下，无法找到我需要的答案。谢谢！

Answer 1

getElementsByClassName返回一个数组。您正在将'onclick'附加到数组而不是span。

所以你只需按照以下方式更新你的功能。

close[0].onclick = function() {
 modalPopup.style.display = "none";
 console.log('wtf why is this not working')
}

https://jsfiddle.net/3n1mpaex/3/

Answer 2

document.getElementsByClassName返回集合/数组，因此您可以使用close[0]代替close
updated fiddle

＆＃13;

// Get modal elements
var modalPopup = document.getElementById('modalPopup');
var modalBtn = document.getElementById('modalBtn');
var close = document.getElementsByClassName('close');
// Opens modal on modalBtn click
modalBtn.onclick = function() {
    modalPopup.style.display = "block";
  }
  // Closes the modal on 'X' click
close[0].onclick = function() {
    modalPopup.style.display = "none";
    console.log('wtf why is this not working')
  }
  // Closes the modal on
window.onclick = function(event) {
  if (event.target == modalPopup) {
    modalPopup.style.display = "none";
  }
}

＆＃13;

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 150px auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 375px;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

＆＃13;

<a id="modalBtn" href="#0">CLICK HERE</a>
<div id="modalPopup" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div>
      <input id="email" type="email" placeholder="Email">
      <input id="password" type="password" placeholder="Password">
      <button id="quickstart-sign-in" href="#">Log in</button>
      <button id="quickstart-sign-up" href="#">Sign up</button>
    </div>
  </div>
</div>

＆＃13;

Answer 3

只需将您的close课程更改为 ID （<span id="close"></span>）即可。那是！ :)快乐的编码！
看看这个：

＆＃13;

// Get modal elements
var modalPopup = document.getElementById('modalPopup');
var modalBtn = document.getElementById('modalBtn');
var close = document.getElementById('close');
// Opens modal on modalBtn click
modalBtn.onclick = function() {
    modalPopup.style.display = "block";
  }
  // Closes the modal on 'X' click
close.onclick = function() {
    modalPopup.style.display = "none";
    console.log('It is now working')
  }
  // Closes the modal on
window.onclick = function(event) {
  if (event.target == modalPopup) {
    modalPopup.style.display = "none";
  }
}

＆＃13;

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content/Box */

.modal-content {
  background-color: #fefefe;
  margin: 150px auto;
  /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 375px;
  /* Could be more or less, depending on screen size */
}


/* The Close Button */

#close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close:hover,
#close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

＆＃13;

<a id="modalBtn" href="#0">CLICK HERE</a>
<div id="modalPopup" class="modal">
  <div class="modal-content">
    <span id="close">&times;</span>
    <div>
      <input id="email" type="email" placeholder="Email">
      <input id="password" type="password" placeholder="Password">
      <button id="quickstart-sign-in" href="#">Log in</button>
      <button id="quickstart-sign-up" href="#">Sign up</button>
    </div>
  </div>
</div>

＆＃13;

<span> onclick事件未触发

3 个答案: