关闭所有模态，然后打开单击的模态答案

【问题标题】：Close all modals and then open the clicked one关闭所有模态，然后打开单击的模态
【发布时间】：2017-02-20 11:54:01
【问题描述】：

我有一个包含多种模式的网站。网站的一半（左侧）有一个表格，另一半（右侧）有空间用于显示模态。

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

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

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

我有以下代码，但我仍然需要以某种方式关闭它，并为所有 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 行。

任何问题/疑问请评论。

【问题讨论】：

您可以为所有模态分配一个类，并在显示相应模态之前单击任何行在该类的帮助下关闭所有模态。

标签： javascript html css

【解决方案1】：

您可以用相同的 className 标记所有模态例如：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";
}

【讨论】：

this 将引用onclick 函数中的btn

【解决方案2】：

在变量中注册您的“打开”模式。单击以打开新模式后，如果另一个模式已打开，则检查变量。如果是，请关闭它。然后打开新的模态。

<!-- Modals -->
<script>
var openedModal;
// Get the modal
function closeModalIfOpen() {
    if (typeof(openedModal) == 'undefined') {
        return;
    }
    openedModal.style.display = "none";
}
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() {
    closeModalIfOpen();
    modal.style.display = "block";
    openedModal = modal;
}
</script>

【讨论】：

【解决方案3】：

// Will store the currently opened modal element.
var currentModal;

// Get all the buttons (use the appropriate selector).
var buttons = document.querySelectorAll(".btn");

// Iterate through all buttons.
buttons.forEach(function(button){
    // Get the modal that corresponds to this button.
    var modal = document.getElementById(button.id + '_details');

    // When this button is clicked...
    button.onclick = function(){
        // Close the currently open modal if there is one.
        if(currentModal){
            currentModal.style.display = 'none';
        }

        // Open the modal for this button and set it as the current modal.
        modal.style.display = 'block';
        currentModal = modal;
    };
});

【讨论】：

【解决方案4】：

给所有的modals一个类（在这个例子中modal）并在显示你想要的modals之前使用下面的函数

function closeAllModals() {
    var modals = document.getElementsByClassName('modal');
    for(var i=0; i<modals.length; i++) {
        modals[i].style.display = 'none' ; 
    }
}

【讨论】：