javascript - NProgress 带有模态对话框以防止点击

Question

我正在使用 NProgress.js 开发一个应用程序。 它的插件很棒。

我想知道可以与 NProgress(一种模式对话框或类似的东西)一起使用，以防止当 NProgress 在我的 $.ajax 请求中运行时单击。

谢谢

Answer 1

这是可以做到的，但是模态的淡入淡出效果会遮挡 NProgress 显示的加载栏。因此，您可能希望使用类似的方法将加载栏附加到“body”DOM 元素以外的其他元素上

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

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

<!-- 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 中初始化它(请注意，keyboard: 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()
  });