關閉所有的模式，然後打開點擊一個

我有一個網站有多種模式。網站的一半（左側）有一張桌子，另一半（右側）有空間顯示模式。關閉所有的模式，然後打開點擊一個

當你點擊表格中的任何一行時，相應的模態出現在右邊的空白處。所以如果表格有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行。

任何問題/疑問請評論。

來源

2016-10-11 alej27

之前，您可以將類分配給所有在顯示各自的模態之前，在該類的幫助下單擊任意行關閉所有模態。 –

將您的「已打開」模式註冊到變量中。一旦你點擊打開一個新的模態，你檢查你的變量，如果另一個模態已經打開。如果是，請關閉它。然後打開新的模式。

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

來源

2016-10-11 20:08:34 chickahoona

您可以通過相同的className 標記所有的模式。例如：類=「我的模態到接近」然後，利用document.getElementsByClassName的（「我的模態到關「）它會返回元素的數組，這是所有的模態對話框。然後，嘗試關閉，因爲這婁代碼

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

來源

2016-10-11 20:10:27 VinhNT

'這個'會參考'onclick'函數中的'btn' –

謝謝，我編輯了答案 – VinhNT

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

來源

2016-10-11 20:13:32 darrylyeo

給所有的情態動詞類（在這個例子中modal），並使用下面的函數顯示你想要的模式

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

來源

2016-10-11 20:31:42

關閉所有的模式，然後打開點擊一個

回答

相關問題