引导程序 4 和加载程序未显示的 jquery show 方法问题

Question

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

.show 方法添加内联 css 显示块，但仍然 loader 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>

我添加了模式代码 bootstrap 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-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);"通过删除默认背景并通过使用一些 alpha 设置对话框本身的背景颜色来创建一个虚拟背景。

<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：把它放在你的body标签中

<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') 将在您请求数据并收到响应后使用 loader('remove');