文章/答案/技术大牛

发布

社区首页 >问答首页 >在同一函数中打开和关闭模式对话框

问在同一函数中打开和关闭模式对话框
EN

Stack Overflow用户

提问于 2017-08-18 00:02:24

回答 1查看 260关注 0票数 1

我有一个网站，它会在数据加载时将数据填充到表中。每个列标题都是可单击的，这会导致表根据该列的数据进行排序。这很好用，但它很慢，所以我希望有一个模式窗口弹出，建议最终用户等待它排序。我已经创建了模式窗口的代码以及调用它和关闭它的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文件中的排序脚本的末尾。因此，我希望它能够在列标题被单击并在排序完成后再次关闭时显示它。

谢谢。

javascript

modal-dialog

回答 1

Stack Overflow用户

发布于 2017-08-18 00:09:28

为什么不使用classList的toggle method

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

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

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

大概是这样的：

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45739996

复制

相似问题

问在同一函数中打开和关闭模式对话框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在同一函数中打开和关闭模式对话框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在同一函数中打开和关闭模式对话框
EN