Bootstrap 3: Show spinner + fade background whilst waiting for modal content to load

Question

So I know that you can use data-target + href now to load remote content, however, what I'm getting back from my ajax response is json (and I cannot change that server side), so I first need to do processing on it.

I want to show a spinner, for which I have the CSS, but also want to already fade the background that happens when you add the class "fade" to the modal div.

Does anyone know how to start that manually, and to make sure the animation is not repeated when I show the modal?

Answer 1

In my projects using Bootstrap 3, I have created a pleaseWait function which I call from other functions that are performing AJAX calls. This function contains a show and hide function. The show function will load what html I wish to display (spinner, text, etc.), whereas the hide function will hide the modal. You could add more jquery to accomplish your fade effect.

Function:

    pleaseWait: function () {
         var $pleaseWaitModal = null;

         return {
             show: function() {
                 $("#pleaseWaitModal").load( "pleaseWaitModal.html", function() {
                     $pleaseWaitModal = $(this);
                     $pleaseWaitModal.modal({
                         backdrop: "static",
                         keyboard: false
                     });
                 });
             },

             hide: function () {
                 // You could call JQuery's fadeTo() here to accomplish your fade effects
                 $("#pleaseWaitModal.modal.in").modal("hide");
             }
         };
     }

Example call:

function myAjaxFunction() {
     pleaseWait().show();

     $.ajax({
          // ajax options
          complete : function() {
                pleaseWait().hide();
          }
    });
}