以相同的函數打開和關閉模式對話框

Question

我有一個網站在加載時將數據填充到表中。每個列標題都是可點擊的，從而導致基於該列數據的表格排序。這工作正常，但它很慢，所以我希望有一個模式窗口彈出窗口，建議最終用戶在排序時等待。我已經創建了模式窗口的代碼以及javascript行來調用它並關閉它，但是我無法讓它出現，然後在排序完成時消失。

模態代碼：

<div id="SortingBox" class="modal3">   
    <!-- Modal content --> 
    <div class="modal-content3"> 
     <div class="modal-header2"> 
      <h2>Loading</h2> 
     </div> 
     <div class="modal-body2"> 
      <pre><strong style="color: black;">Please Wait...</strong></pre> 
     </div> 
    </div> 
</div> 

我打電話與該行的模式：

document.getElementById('SortingBox').style.display='block'; 

而與此關閉：

document.getElementById('SortingBox').style.display='none'; 

現在我已經有了這方面的工作頁面加載和關閉它的行是在單獨的js文件中的排序腳本的末尾。所以我希望它能夠在單擊列標題時出現，並在排序完成後再次關閉。

謝謝。

Answer 1

爲什麼不直接使用classList的togglemethod？

創建一個名爲is-modal-hidden的類，其中display: none。

// style.css 
.is-modal-hidden { 
    display: none; 
} 

創建一個js函數來切換模式，通過切換類。

類似的東西：

function toggleModal() { 
    document.getElementById('SortingBox').classList.toggle('is-modal-hidden'); 
}