在 Datatables jQuery 完成之前不显示模态答案

【问题标题】：Modal isn't shown until Datatables jQuery is finished在 Datatables jQuery 完成之前不显示模态
【发布时间】：2019-02-27 17:56:36
【问题描述】：

我在将 Datatables jQuery（1.10 版）实现到 ASP NET 项目时遇到了麻烦。问题是我正在一个主 JavaScript 文件中加载所有必要的配置。

我首先将所有数据绑定到一个 Gridview 中，然后自动执行上面提到的 JavaScript 文件。

我的问题是（由于我的后端结构，我不能使用 AJAX）我需要在代码隐藏（C#）中绑定 gridview 中的所有数据，并且一旦数据已经绑定，应用JavaScript 脚本。 一切正常。但是，从数据绑定到数据表的 CSS 和 JavaScript 准备好之前，需要一些时间。同时，gridview 以糟糕的样式显示给用户，所以我想避免这种情况，因为它不利于用户体验。

我正在尝试这个（在 JavaScript 中）

openModal('id_modal');
load_datatable('id_table'); //function that loads all necessary for 
                            //datatables

但模式出现在 load_datatable 完成之后。不知道是什么原因造成的。

值得一提的是，主 JavaScript 运行良好。样式已成功应用，但同样没有显示模式。

我要弹出的模态是

<div class="modal fade" id="id_modal">
        <div class="text-center">
            <asp:Image ID="imgLoading" runat="server" 
              ImageUrl="~/img/loading.svg" AlternateText="Loading..." 
               ToolTip="Loading ..." CssClass="imageLoading" />
        </div>
    </div>

我也尝试过没有图像、没有 ASP 控件等的简单模式，但没有任何反应。

【问题讨论】：

貌似openModal是异步的，可能需要传入一个回调函数（即：load_datatable）给openModal完成后调用
如果你使用的是引导模式，那么你需要监听'shown.bs.modal'事件，然后在事件处理程序中调用load_datatable
我也这样做过：$('.modal').on('shown.bs.modal', function(){load_datatable('id_table')});但它没有捕捉到任何事件
当然还有 $('#id_modal').on('shown.bs.modal', function(){load_datatable('id_table')});
我从 modal 中删除了“fade”类，它捕获了事件。但是，它仍然无法正常工作。模式在数据表之后弹出

标签： javascript html popup

【解决方案1】：

我找到了部分解决方案。

在我创建的母版页中

<div class="loader"></div>

位于 HTML 代码的顶部。

然后我在 masterPage.css 中定义了类：

    .loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #212529;
    background: /*HERE IT GOES THE IMAGE YOU WANT TO DISPLAY*/
    opacity: .9;
}

最后，在我的 Master.js 中：

$(document).ready(function(){
    //DO ALL THE STUFF YOU NEED
    //AND AT THE END

    $('.loader').hide();     
});

它会在每次加载 Web 表单时显示模式，并在加载所有 HTML 时隐藏它。

【讨论】：