Question

我使用NProgress.js使用应用程序。它的惊人插件。

我知道可以使用NProgress，这是一个类似的模态对话框，以防止在我的$ .ajax请求中运行NProgress时点击。

韩国社交协会

Answer 1

这可以做到，但模态的褪色效果掩盖了NProgress所示的加载条。因此，您可能希望将加载栏附加到“＆＃39; 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会阻止键入以解除模态，背景：静态阻止点击以解除）：

$('#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()
  });

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

使用模态对话框进行NProgress以防止单击

2 个答案: