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

Posted 2023-03-06

【中文标题】Bootstrap 3：在等待模式内容加载时显示微调器+淡入淡出背景

【英文标题】：Bootstrap 3: Show spinner + fade background whilst waiting for modal content to load

【发布时间】：2014-03-02 01:18:11

【问题描述】：

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

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

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

【问题讨论】：

我没有正确理解您的问题。你能更具体一点吗？您想在等待 AJAX 内容时在模态框上显示一个微调器，对吗？

【参考方案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();
          
    );