如何：有 2 个单独的按钮来关闭模式弹出窗口？

Question

我有一个来自 w3 学校 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal 的基本模态弹出窗口，我想使用两个 link 来关闭模态，但是当我尝试时，没有任何效果，因为两个 [=当我尝试让 2 links 关闭模态

时，我为关闭模态而添加的 36=]s 停止工作

这里是关闭模态的link <a href="#" class="close"></a>

这是javascript

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

如何使用 class "close"

添加此按钮

<a href="#" class="close"></a>

还有！！这个按钮 class "close-2"

<span class="close-2"></span>

所以我可以有 2 个按钮来关闭模式，任何帮助将不胜感激

Answer 1

首先，您要做的是将两个关闭按钮设置为具有相同的 class，因此 class="close".

也可以使用单个函数来关闭模态对话框，例如

function closeModal() {
  modal.style.display = "none";
}

然后替换下面的

var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

和

var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
  closeBtn.onclick = closeModal;
}

其中一个关闭按钮停止工作的原因是因为 document.getElementsByClassName() returns 一个 HTMLCollection 代表找到的元素的集合。 getElementsByClassName("close")[0] 调用 returns 集合中的第一个元素，因此只有一个关闭按钮接收 onclick 事件。要解决此问题，解决方案是不仅获取第一个元素，还获取所有元素，然后遍历所有元素，并将 onclick 处理程序添加到所有元素，如所示。

与 id 属性不同，class 属性不必是唯一的，因此两者可以具有相同的 close 值。

完整的工作示例：

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
     <a href="#" class="close">close</a>
    <p>Some text in the Modal..</p>
  </div>

</div>

<script>
function closeModal() {
  modal.style.display = "none";
}

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
for (let closeBtn of spans) {
  closeBtn.onclick = closeModal;
}



// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

如何：有 2 个单独的按钮来关闭模式弹出窗口？

How To: Have 2 seperate buttons to close modal pop up?

javascript

css

modal-dialog

popup