javascript - 关闭所有模式，然后打开点击的模式

Question

我有一个具有多个模式的网站。网站的一半(左侧)有一个表格，另一半(右侧)有用于显示模式的空间。

当您单击表格中的任何一行时，相应的模态框会出现在右侧的空间中。因此，如果表格有 5 行，它有 5 个对应的模态框，这些模态框应根据您单击的行显示。

我想要的是当你点击一行时，相应的模态出现。我已经这样做了。但是，我想进一步做的是，当您单击另一行时，会出现相应的模态。 但是，这个新模态可能会与之前打开的模态重叠，或者它可能会出现在后面(这两个选项中的任何一个)。

这就是问题所在。如果您已经点击了一行并且它已经打开 它对应的模态，然后你点击另一行，首先模态必须关闭，然后应该出现这一行的对应模态。 不允许 Bootstrap 。

我有以下代码，但我仍然需要以某种方式关闭它，并为所有 5 行创建代码。

    <!-- Modals --> <script>
    // Get the modal
    var modal = document.getElementById('B1000C42LMG2-12_details');
    // Get the button that opens the modal
    var btn = document.getElementById("B1000C42LMG2-12");
    // When the user clicks on the button, open the modal 
    btn.onclick = function() {modal.style.display = "block";}
</script>

我想澄清一下，我实际上并没有 5 行，这只是为了让您更轻松。 现实中大约有 69 行。

如有任何问题/疑问，请发表评论。

Answer 1

你可以用相同的类名标记你所有的模态 例如:class="my-modal-to-close" 然后，使用 document.getElementsByClassName("my-modal-to-close") 它将返回一个元素数组，这些元素都是你的模态框 然后，尝试按照下面的代码关闭

var x = document.getElementsByClassName("my-modal-to-close");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.display= "none";
}

然后，打开点击的那个，

btn.onclick = function() {
modal_to_display.style.display = "block";
}

一切尽在

btn.onclick = function() {
    var x = document.getElementsByClassName("my-modal-to-close");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].style.display= "none";
    }
    modal_to_display.style.display = "block";
}