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'）。模态（ '隐藏'）

考虑到隐藏在超时后的模态：例如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>

Answer 2

虽然这不是直接的答案，但我的问题是netcore共享文件夹中的_Layout有大量库正在发送。连同我在页面中放入的CDN一起，这引起了冲突并阻止了模式的工作。

使用ajaxStart切换Bootsrap 4模态屏幕-ajaxStop

2 个答案: