Блог

У меня есть веб-сайт с несколькими модальностями. Половина веб-сайта (левая сторона) содержит таблицу, а другая половина (правая сторона) имеет пространство для отображения модальностей.

Когда вы нажимаете на любую строку в таблице, в нужном месте появляется соответствующий модал. Итак, если в таблице 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 строк.

Любой вопрос / сомнения, пожалуйста, прокомментируйте.

Вы можете пометить все свои модальные файлы одним и тем же именем класса, например: 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";
}
  

Зарегистрируйте свой «открытый» модал в переменной. Как только вы нажимаете, чтобы открыть новый модал, вы проверяете свою переменную, если другой модал уже открыт. Если да, закройте его. Затем откройте новый модал.

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

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

Дайте всем модалам класс (в этом примере modal ) и используйте следующую функцию, прежде чем показывать желаемый модальный

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