Question

所以我知道你现在可以使用data-target + href来加载远程内容，但是，我从ajax响应中得到的是json（我不能改变那个服务器端），所以我首先需要对它进行处理。

我想展示一个微调器，我有CSS，但也希望已经淡化了将“fade”类添加到模态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();
          }
    });
}

Bootstrap 3：在等待加载模态内容时显示微调器+淡入淡出背景

1 个答案: