NProgress带有模式对话框以防止点击

NProgress with modal dialog to prevent click

本文关键字：对话框 模式 NProgress      更新时间：2023-09-26

我正在使用NProgress.js设计一个应用程序。它的惊人插件。

我知道当NProgress在我的$.ajax请求中运行时，可以使用NProgress，一个模式对话框或类似的东西来防止点击。

Tks

这是可以做到的，但模态的衰落效应掩盖了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防止键入忽略模态，背景：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()
  });

我认为这个

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

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

相关文章：