jquery - 使用 ajaxStart - ajaxStop 切换 Bootstrap 4 模式屏幕

Question

如何在 ajaxStart 上打开模态屏幕并在 ajaxStop 上关闭它？

我已经在 Stack 上尝试了很多答案，但由于某种原因，它不能满足我的要求。

我有以下 Bootstrap 4 模式:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="crossorigin="anonymous"></script>
<div class="modal fade" id="loadingModal"  data-target="#myModal" name="loadingModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">            
            <div class="modal-body">
                <img src="~/images/spinner.gif" />
            </div>           
        </div>
    </div>
</div>

我有以下 JQuery:

    $(document).ajaxStart(function () {
        $('#loadingModal').toggle();          
        alert('Ajax happening');
    });
    $(document).ajaxStop(function () {
        $('#loading').hide();
        alert('Ajax stopping');
    });

当我使用按钮事件时，它工作正常，但我想在 Ajax 调用执行其工作时执行此操作。

TIA

Answer 1

为了显示/隐藏模式，您可以使用:

• $('#loadingModal').modal('show');
• $('#loadingModal').modal('隐藏')

考虑在超时后隐藏模式:例如 0.5 秒后。

代码片段:

$(document).ajaxStart(function () {
    $('#loadingModal').modal('show');
    console.log('Ajax happening');
});
$(document).ajaxStop(function () {
    setTimeout(() => $('#loadingModal').modal('hide'), 500);
    console.log('Ajax complete');
});



//
// an ajax call....
//
$.get('https://api.github.com/users/defunkt', function() {
  console.log('ajax end');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="modal fade" id="loadingModal"  data-target="#myModal" name="loadingModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <i class="fa fa-circle-o-notch fa-spin" style="font-size:24px"></i>
            </div>
        </div>
    </div>
</div>