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

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

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

Answer 2

您可以使用相同的className标记所有模态例如：class =＆＃34; my-modal-to-close＆＃34; 然后，使用document.getElementsByClassName（＆＃34; my-modal-to-close＆＃34;）它将返回一个元素数组，它们都是你的模态框然后，尝试关闭此下面的代码

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

Answer 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;
    };
});

Answer 4

为所有模态提供一个类（在此示例中为modal）并在显示所需模态之前使用以下函数

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

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

4 个答案: