Модальный не отображается, пока Datatables jQuery не закончится

Question

У меня проблемы с реализацией Datatables jQuery (версия 1.10) для проекта ASP NET.Дело в том, что я загружаю всю необходимую конфигурацию в главный файл JavaScript.

Сначала я связываю все данные в Gridview, а затем автоматически выполняется упомянутый выше файл JavaScript.

Моя проблема в том, что (поскольку я не могу использовать AJAX из-за своей внутренней структуры), мне нужно связать ВСЕ данные в виде сетки в codebehind (C #) и, когда данные уже связаны, применить JavaScriptскрипт. Все отлично работает.Однако с момента привязки данных требуется некоторое время, пока не будут готовы CSS и JavaScript для datatable.А пока, сеточный вид показывается пользователю в ужасном стиле, поэтому я хочу избежать этого, так как он не очень удобен для пользователя.

Я пытаюсь это (в JavaScript)

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

Но модал появляется ПОСЛЕ окончания загрузки load_datatable.Я не знаю, что это может быть причиной.

Стоит отметить, что мастер master 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 и т. Д., Но ничего не происходит.

Answer 1

Я нашел частичное решение.

На главной странице я создал

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

Поместил вверху HTML-код.

Затем в masterPage.css IВы определили класс:

    .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();     
});

Он будет показывать модальный режим при каждой загрузке веб-формы искрыть, когда весь HTML загружен.