Проблемы метода jquery show с начальной загрузкой 4 и загрузчиком, не отображающим

Question

$('.modal-content div.loader').show();

.show метод добавляет встроенный блок отображения css, но div загрузчика не показывает

до вызова ajax

когда я просто удаляю метод кнопки закрытия, я загружаю загрузчик поздно после вызова ajax

<div class="modal fade show" id="addnotetocal" tabindex="-1" role="dialog" aria-labelledby="addnotetocal" style="padding-right: 17px;">

        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Fees</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form name="event-field">                        
                        <div class="form-row">
                                                        <div class="input-group-prepend col-md-12">
                                                                    <!-- <label for="fee">Fee</label>    -->
                                                                    <span class="input-group-text"><i class="fa fa-dollar"></i></span>
                                                                    <input type="number" name="fee" id="fee" class="form-control" placeholder="">
                                                        </div>
                                                        <div class="custom gap"></div>
                                                        <div class="col-md-12">
                                                            <input class="" type="checkbox" value="" id="na">
                                                            <label class="form-check-label" for="na">
                                                                Not Available
                                                            </label>
                                                        </div>

                        </div>
                                                <input type="hidden" name="selected_date" id="selected_date" value="">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="ev_cancel" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="ev_submit" data-action="submit-event">Submit</button>
                                        <button type="button" class="btn btn-secondary" id="ev_delete" data-action="submit-event">Delete</button>
                                        <button type="button" class="btn btn-primary" id="ev_update" data-action="submit-event">Update</button>                                     
                </div>
                                <div class="loader">
                            <img src="<?php echo get_stylesheet_directory_uri().'/img/loading.gif' ?>" alt="">
                        </div>
            </div>

        </div>

        </div>

Я добавил модальный код начальной загрузки 4 и модель работает нормально, но проблема с вызовом ajax с загрузчиком не работает.

пожалуйста, просмотрите это и обновите ее быстро

загрузчик и изображение css

.loader {
    display: none;
    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    z-index: 999;
}

.loader img {
    top: 50%;
    position: absolute;
}

Answer 1

Хитрость здесь в следующем: data-background = "false" style = "background-color: rgba (0, 0, 0, 0.5);"удалив задний фон по умолчанию и создайте фиктивный фон, установив цвет фона самого диалога с некоторой альфа-версией.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Примечания: нажатие на фон не закрывает диалог, как ожидается.Решение: чтобы достичь этого, вам нужно добавить код javascript.Вот несколько примеров того, как вы можете это сделать.

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

HTML: поместите это в тег вашего тела

<div id="LoaderWindow">
    <div id="Loader"></div>
</div>

/ * CSS для загрузки * /

.loader-window {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1051;
    background: rgba(54, 70, 93, 0.95);
}

.loader {
    position: absolute;
    top:50%;
    left:50%;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #5BFEC8;
    width: 60px;
    height: 60px;
    margin-top:-30px;
    margin-left:-30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Вы должны использовать jquery для добавления класса.

function loader(
    operation
) {
    if (operation == 'add') {
        $('#LoaderWindow').addClass('loader-window');
        $('#Loader').addClass('loader');
    } else {
        $('#LoaderWindow').removeClass('loader-window');
        $('#Loader').removeClass('loader');
    }
}

loader ('add') будет использоваться при запросе данных и после получения ответа использовать загрузчик ('remove');