以相同的函数打开和关闭模式对话框

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