Bootstrap 3: show spinner + fade background while waiting for modal content to load

Question

So, I know that now you can use data-target + href to download remote content, however what I get from my ajax response is json (and I cannot change this side of the server), so I need to process on him.

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

Does anyone know how to start this manually, and to make sure the animation does not repeat when I show the modal?

Answer 1

In my projects using Bootstrap 3, I created the pleaseWait function, which I call from other functions that make AJAX calls. This function contains the show and hide function. The show function will load what html I want to display (spinner, text, etc.), whereas the hide function will hide the modal. You can add more jquery to achieve a fading effect.

Functions:

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 fadeTo() here to accomplish your fade effects $("#pleaseWaitModal.modal.in").modal("hide"); } }; } 

Call example:

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