Question

我对此代码有两个问题。第一个是为什么在警报之前没有显示模态？第二个是我如何延迟模态，因为弹出窗口速度太快以至于我无法在模态中看到任何内容。

    $('#myModal').modal('hide');
    $(document).ajaxStart(function() {
        $('#myModal').modal('show');
    }).ajaxStop(function() {
        $('#myModal').modal('hide');
        //$('#myModal').delay(5000).modal('hide'); does not work

    });


    $(".generate_report").click(function(event) {
        event.preventDefault();

        $.post("xls.php", $(".form_report").serialize(), function() {
        }).done(function(data) {
            alert("should be executed only after modal");
        });
    });

demo

Answer 1

您可以使用此代码实现相同的目标：

$(".generate_report").click(function (event) {
    event.preventDefault();
    $('#myModal').modal('show');
        setTimeout(function(){ 
            $.post("xls.php", $(".form_report").serialize(),function(data){
            $('#myModal').modal('hide');
            alert("after modal");

        }) 
    }, 2000);
});

并删除此代码

$(document).ajaxStart(function() {
    $('#myModal').modal('show');
}).ajaxStop(function() {
    $('#myModal').modal('hide');
    //$('#myModal').delay(5000).modal('hide'); does not work

});

Answer 2

这段代码的作用是在ajax调用启动时显示一个模态，并在完成时立即隐藏它。您可以使用计时器等待一段时间再关闭它。

此外，您已经在jQuery.post中嵌套了一个回调函数，但是您没有使用它，这会导致代码混乱。当你直接将它附加到AJAX函数时，不需要使用.done（）。你可以在这里使用回调函数。

$.post("xls.php", $(".form_report").serialize(), function(data) {            
    alert("should be executed only after modal");
});

但这只是一个代码样式问题。 done（），success（），fail（）方法用于jQuery.Deferred promise对象，$ .ajax恰好返回。由于$ .post / $。get只是$ .ajax的指针，他们也会。

其次，如果您希望模态在关闭之前等待，您可以这样做：

var waitTimer;
var timeToWait = 2000; // Time to wait here
var $myModal = $('#myModal');
$myModal.modal('hide');

$(document).ajaxStart(function() {
    $myModal.modal('show');
}).ajaxStop(function() {
    if (waitTimer) {
       clearTimeout(waitTimer);
    }

    waitTimer = setTimeout(function() {
        $myModal.modal('hide');
    }, msToWait);
});

您尝试使用的.delay（）方法仅在您动画后才能使用。

同样快速提示：缓存jQuery选择器。您告诉jQuery跳转DOM 3次以搜索相同的元素。

模态仅在ajax请求后触发

2 个答案: