Javascript 如何：使用两个单独的按钮关闭模式弹出窗口？

我有一个从w3学校弹出的基本模式，我想用两个链接来关闭模式，但是当我尝试时，没有任何效果，因为当我尝试用两个链接来关闭模式时，我添加来关闭模式的两个链接都停止工作

下面是关闭模式的链接

下面是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";
  }
}

//获取模式
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

如何在类为“close”时添加此按钮

还有！！此按钮具有“close-2”类

---

因此，我可以有两个按钮来关闭模式，任何帮助都将不胜感激

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

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";
}

其中一个关闭按钮停止工作的原因是

document.getElementsByClassName（）

返回表示找到的元素集合的。另外，

getElementsByClassName（“close”）[0]

调用返回集合中的第一个元素，因此只有一个close按钮接收

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>

&时代；
模态中的一些文本

函数closeModal（）{
modal.style.display=“无”；
}
//获取模态
var modal=document.getElementById（“myModal”）；
//获取打开模式对话框的按钮
var btn=document.getElementById（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
对于（让闭合的跨距）{
closeBtn.onclick=closeModal；
}
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

是这样吗？它不工作。

//获取模态变量modal=document.getElementById（“myModal”）；var btn=document.getElementById（“myBtn”）；//当用户单击按钮时，打开modal btn.onclick=function（）{modal.style.display=“block”}var span=document.getElementsByClassName（“close”）；对于（让closeBtn of span）{closeBtn.onclick=closeModal；}//当用户单击模式之外的任何位置时，关闭它window.onclick=function（event）{if（event.target==modal）{modal.style.display=“none”；}

您能提供一个沃尔金示例吗？提供了工作示例，很抱歉，我忘了添加它。我用你在原始问题中提供的同一个w3schools示例测试了它。你真的在帮我，非常感谢，但问题是，我需要以两种不同的方式设置紧密链接的样式，这就是为什么我需要两个不同的紧密类，我们可以使用close和close-1吗？我如何为每个关闭的链接分配不同的类，现在始终显示1个链接，但在模态打开之前，这两个链接都应该隐藏。标记为最佳答案，因为您所说的一切都切中要害，我已经让它工作了，谢谢！

<!-- 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>