Javascript 单页多模式窗口（灵活的JS解决方案）

问题
我希望实现一个灵活的javascript解决方案，在同一页面上打开和关闭多个模式窗口。

我已经找到了以这种方式打开多个模式窗口的方法，但我一辈子都不知道如何通过单击按钮或在模式窗口外部单击来关闭它们。

以下是我的javascript代码：

var openModal = document.getElementsByClassName("open-modal");

for (var i = 0; i < openModal.length; i++) {
    var thisOpenModal = openModal[i];

    thisOpenModal.addEventListener("click", function() {
        var modal = document.getElementById(this.dataset.modal);
        modal.style.display = "block";

    }, false);
}

var openModal=document.getElementsByClassName（“打开模式”）；
对于（变量i=0；i

（这段代码不是我自己写的，它是本页上“pgk”答案的编辑副本：）

我通过将“打开模式”类添加到我的“按钮”来触发模式窗口，并使用与模式窗口id相关的“数据模式”：

<div class="featurette-wrap featurette--anchor open-modal" data-modal="modal-microsoft-account">
   Opprett konto
</div>

奥普雷特·康托

上面的按钮触发id为modal microsoft帐户的modal窗口：

<div class="modal" id="modal-microsoft-account">
    Microsoft-konto
</div>

微软近藤

所以我的问题是：
如何实现模式窗口打开后关闭的方法？


我已经尝试过这样做，但我无法让它工作（从W3学校）：

//当用户单击（x）时，关闭模式对话框
closeModal.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

最好使用事件侦听器来跟踪元素上的操作，正如我在下面所做的那样

另外，在使用Javascript设置样式时，使用

setAttribute

函数可以确保覆盖分配给该元素的所有其他样式，并且您设置的样式始终适用（除非另一个样式设置为重要样式）

var openModal=document.getElementsByClassName（“打开模式”）；
对于（变量i=0；i

奥普雷特·康托
微软近藤


x

最好使用事件侦听器来跟踪元素上的操作，正如我在下面所做的那样

另外，在使用Javascript设置样式时，使用

setAttribute

函数可以确保覆盖分配给该元素的所有其他样式，并且您设置的样式始终适用（除非另一个样式设置为重要样式）

var openModal=document.getElementsByClassName（“打开模式”）；
对于（变量i=0；i

奥普雷特·康托
微软近藤


x

所以我最终找到了一个解决方案，它完全符合我在W3Schools论坛上寻找的结果：

---

这就成功了，所以我最终找到了一个解决方案，它完全符合我在W3Schools论坛上寻找的结果：

---

这就成功了谢谢你的解释性回答dqve好的，没问题@kimnthorstensen，我刚刚编辑了代码以适应多个模态，试试这个。先生，你是一个传奇！很有魅力不客气，我很高兴我能帮上忙，如果有任何进一步的调整，请留下评论哦，实际上我似乎只能打开一个（相同的）模式窗口，尽管我的两个按钮指向不同的按钮谢谢你的解释性回答dqve好的，没问题@kimnthorstensen，我刚刚编辑了代码以适应多种模态，请尝试一下。先生，你是一个传奇！很有魅力不客气，我

// When the user clicks on <span> (x), close the modal
    closeModal.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";
        }
    }