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

Question

I am usign a app using NProgress.js. Its amazing plugin.

I whanto know it is possible to use with NProgress, a modal dialog ou something like it, to prevent click when NProgress is running in my $.ajax request.

Tks

Answer 1

This can be done, but the fading effect of the modal obscures the loading bar shown by NProgress. So you may want to attach the loading bar to something other than the 'body' DOM element using something like

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

In any case, simply drop a modal block somewhere in the body of the HTML page:

<!-- 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>

Initialize it in javascript (note that keyboard: false prevents typing from dismissing the modal, backdrop:static prevents clicking to dismiss):

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

Then show/hide it in an Ajax call appropriately:

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

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

Answer 2

I think this

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

Remember that you must manage the errors.