Question

我在模式框中有以下JavaScript Ajax代码：

$(document).ready(function() {
$("BB").click(function() {
var Id = jQuery(this).attr("id");
$.ajax({
    type: 'POST',
    data: {
        'modal_id' : Id,
    },
    url : "upload.php",
    success: function(response) {
        if(response) {
            $('kk').append(response);
            $('#modal_'+Id).modal('show');
            $(document).on('hidden.bs.modal', modal_id, function (event) {
                $(this).remove();
            });
        } else {
            alert('Error');
        }
    }
});
});
});

当打开模态框并单击BB元素时，将加载upload.php。

<BB id="2" data-original-title="Preview" data-placement="top" class="data-tooltip" rel="tooltip" data-toggle="modal">

，结果将以KK元素显示：

<kk><!--result upload.php--></kk>

目前成功功能设置为KK响应和模态框。

这是我的问题：

如果在处理Upload.php时如何添加加载旋转，一旦显示结果，加载旋转也将被删除？

提前致谢。

Answer 1

你必须在你的模态中添加这个div（.loading）。

<div class="row loading hidden" style="position: absolute; top: 50px; left: 130px; z-index: 10;">
                                <div class="col-md-12">
                                    <h2 class="spinnerH2" style="margin-left:130px;"><i class="fa fa-2x fa-spinner fa-spin"></i></h2>
                                    <h3 class="textH3 hidden" style="background-color: red; color: white; border-radius: 4px;"></h3>
                                </div>
</div>




$(document).ready(function() {
$("BB").click(function() {
    $(".loading").removeClass('hidden');
    $(".spinnerH2").removeClass("hidden");
var Id = jQuery(this).attr("id");
$.ajax({
    type: 'POST',
    data: {
        'modal_id' : Id,
    },
    url : "upload.php",
    success: function(response) {
        if(response) {
            $(".spinnerH2").addClass('hidden');
            $('kk').append(response);
            $('#modal_'+Id).modal('show');
            $(document).on('hidden.bs.modal', modal_id, function (event) {

                $(this).remove();
            });
        } else {
           $(".spinnerH2").addClass('hidden');
            alert('Error');

        }
    }
});
});
});

Answer 2

$(document).ready(function() {
    $("BB").click(function() {

        //show the loading spin here
        $("#loading").show();

        var Id = jQuery(this).attr("id");
        $.ajax({
            type: 'POST',
            data: {
                'modal_id' : Id,
            },
            url : "upload.php",
            success: function(response) {

                //hide the loading spin here
                $("#loading").hide();

                if(response) {
                    $('kk').append(response);
                    $('#modal_'+Id).modal('show');
                    $(document).on('hidden.bs.modal', modal_id, function(event) {
                        $(this).remove();
                    });
                } else {
                    alert('Error');
                }
            }
        });
    });
});

ajax加载成功响应加载旋转

2 个答案: