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

Question

所以我知道您现在可以使用 data-target + href 来加载远程内容，但是，我从 ajax 响应中得到的是 json(而且我无法更改服务器端)，所以我首先需要对其进行处理。

我想展示一个微调器，我有它的 CSS，但也想已经淡出当您将类“淡入淡出”添加到模态 div 时发生的背景。

有谁知道如何手动启动它，并确保在我显示模态时不重复动画？

Answer 1

在我使用 Bootstrap 3 的元素中，我创建了一个 pleaseWait 函数，我从其他执行 AJAX 调用的函数中调用该函数。此功能包含显示和隐藏功能。 show 函数将加载我希望显示的 html(微调器、文本等)，而 hide 函数将隐藏模式。你可以添加更多的 jquery 来完成你的淡入淡出效果。

功能:

    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");
             }
         };
     }

调用示例:

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

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