2017-08-17 68 views
0

我有一個網站在加載時將數據填充到表中。每個列標題都是可點擊的,從而導致基於該列數據的表格排序。這工作正常,但它很慢,所以我希望有一個模式窗口彈出窗口,建議最終用戶在排序時等待。我已經創建了模式窗口的代碼以及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文件中的排序腳本的末尾。所以我希望它能夠在單擊列標題時出現,並在排序完成後再次關閉。

謝謝。

回答

0

爲什麼不直接使用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'); 
} 
+0

我很抱歉,因爲我很新的JS編程。我喜歡你的建議,但是當你說「有展示:沒有」時,你的具體意思是什麼? – Jerjef

+0

創建一個用html加載的css文件,將css選擇器的名稱和聲明與我所提到的一起... – felixmosh

+0

CSS已就位,但它報告該對象不支持toggleClass。 – Jerjef