直到Datatables JQuery完成后才会显示模态

Question

我在向ASP NET项目实现Datatables JQuery（版本1.10）时遇到了麻烦。问题是我在Master JS文件中加载所有necesarry配置。

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

我的问题是（因为我的后端结构不能使用AJAX）我需要在代码隐藏（C＃）中绑定gridview中的所有数据，并且一旦绑定了数据，就应用JS脚本。一切正常。但是，数据绑定需要一些时间，直到datatable的css和javascript准备就绪为止。同时，gridview以可怕的风格向用户显示，因此我想避免这种情况，因为它对用户体验不利。

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

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

但模态出现在load_datatable结束后。我不知道它可能导致什么。

值得一提的是，JS大师工作正常。样式已成功应用，但同样不会弹出模态。

更新我要弹出的模态是

<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控制等，但没有任何反应。

Answer 1

我找到了部分解决方案。

在Master Page中我创建了

<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时隐藏它。