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-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：将其放在您的身体标签中

<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'）;

jQuery的show方法问题与引导4和加载程序不显示

1 个答案: