NProgress带模态对话框以防止单击

Question

我使用NProgress.js开发了一个应用程序。 其惊人的插件。

我想知道可以在NProgress $ .ajax请求中运行NProgress时使用NProgress（一个类似它的模态对话框）来防止单击。

TKS

Answer 1

可以这样做，但是模态的衰落效果使NProgress所示的加载条变得模糊。 因此，您可能想使用以下方式将加载栏附加到“ body” DOM元素以外的其他内容上：

NProgress.configure({ parent: '#newContainer' });

无论如何，只要在HTML页面的正文中的某个位置放置一个模式块即可：

<!-- Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Fetching New Data</h4>
     </div>
   <div class="modal-body">
     Please wait...
  </div>
</div>

用javascript初始化它（请注意，键盘：false阻止键入消除模式，而background：static阻止单击消除）：

$('#loadingModal').modal({ show: false, keyboard: false, backdrop: 'static'});

然后在Ajax调用中适当地显示/隐藏它：

NProgress.start();
$('#loadingModal').modal('show');

$.ajax({...
  }).done(response => {
    // Handle success
  }).fail(err => {
    // Handle errors
  }).always(() => {
    $('#loadingModal').modal('hide');
    NProgress.done()
  });

Answer 2

我认为这

 NProgress.inc() 
 $.ajax({...})
  .done(function( data ) {
    ...
    NProgress.done()
  });

请记住，您必须管理错误。