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的toggle method？

使用is-modal-hidden创建一个名为display: none的类。

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

通过切换类来创建一个js函数来切换模态。

类似的东西：

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

在同一个函数中打开和关闭模态对话框

1 个答案: