Schließen Sie alle Modalitäten und öffnen Sie dann die angeklickte

Question

Ich habe eine Website mit mehreren Modalitäten. Die Hälfte der Website (linke Seite) hat einen Tisch und die andere Hälfte (rechte Seite) hat Platz für die Anzeige der Modalitäten.

Wenn Sie auf eine Zeile in der Tabelle klicken, wird ein entsprechendes Modal im rechten Bereich angezeigt. Wenn die Tabelle also 5 Zeilen hat, hat sie 5 entsprechende Modalitäten, die abhängig von der Zeile erscheinen sollten, auf die Sie geklickt haben.

Ich möchte, dass wenn Sie auf eine Zeile klicken, das entsprechende Modal angezeigt wird. Ich habe das schon gemacht. Was ich jedoch weiter machen möchte ist, dass wenn Sie auf eine andere Zeile klicken, das entsprechende Modal erscheint. Jedoch, kann dieses neue modale das vorher geöffnete modale überlappen, oder es kann hinter (eine dieser beiden Optionen) erscheinen.

Dies ist das Problem. Wenn Sie bereits auf eine Zeile geklickt haben und das entsprechende Modal geöffnet wurde und Sie dann auf eine andere Zeile klicken, muss zuerst das Modal geschlossen werden, und dann sollte das entsprechende Modal dieser Zeile angezeigt werden. Kein Bootstrap erlaubt.

Ich habe den folgenden Code, aber ich muss es immer noch irgendwie schließen, plus den Code für alle 5 Zeilen erstellen.

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

Ich mag würde klarstellen, dass ich eigentlich 5 Zeilen nicht haben, ist es nur, um es Ihnen leichter zu machen. Es gibt ungefähr 69 Reihen in der Wirklichkeit.

Alle Fragen/Zweifel bitte kommentieren.

Answer 1

Registrieren Sie Ihr "geöffnetes" Modal in einer Variablen. Sobald Sie klicken, um ein neues Modal zu öffnen, überprüfen Sie Ihre Variable, wenn ein anderes Modal bereits geöffnet ist. Wenn ja, schließen Sie es. Dann öffne das neue Modal.

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

Sie können alle Ihres modal durch gleichen Klassennamen Zum Beispiel markieren: class = "my-modal-to-close" Dann Verwendung von document.getElementsByClassName machen ("my-modal-to-close „) Es wird ein Array von Element zurückgeben, die dann alle Ihre modale Box sind, versuchen Sie, wie diese unten Code

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

öffnen Sie dann die angeklickt ein,

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

schließen

und alle in

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

alle Modalverben eine Klasse geben (in diesem Beispiel modal) und verwenden Sie die folgende Funktion vor dem gewünschten modalen zeigt

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