Bootstrap 5 Modal 和 jQuery - 居中的微调器需要时间在内容加载之前显示

问题描述

我有一个 bootstrap 5 模态，在 jQuery 中有一些特定的功能，一个居中的微调器在加载内容之前出现在模态中，这里是一个活生生的例子。

我遇到的问题是，在加载内容之前，当模态打开时微调器需要时间来了解有关尝试查看示例链接的更多信息

当我点击按钮时，微调器没有快速显示，它首先显示内容，然后是微调器，这是不正确的。

现场示例： https://codepen.io/themes4all/pen/vYmeXpy

jQuery 代码：

(function ($) {
    "use strict";

    $(window).on("load",function () {
        if ($(".modal").length) {
            $(".modal").modal("show");
            $(".modal").on("shown.bs.modal",function (e) {
                e.preventDefault();
                $(".spinner")
                    .removeClass("d-none")
                    .delay(3000)
                    .fadeOut(500,function () {
                        $(this).addClass("d-none");
                    });
                return false;
            });
            $(".btn-close").on("click",function (e) {
                e.preventDefault();
                var swalWithBootstrapButtons = Swal.mixin({
                    customClass: {
                        confirmButton: "btn btn-primary",cancelButton: "btn btn-danger me-3",},buttonsstyling: false,});
                swalWithBootstrapButtons
                    .fire({
                        title: "Are you sure?",text: "You won't be able to revert this!",icon: "warning",confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes,I am!",cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No,I'm Not",showCancelButton: true,reverseButtons: true,focusConfirm: false,})
                    .then((result) => {
                        if (result.isConfirmed) {
                            $(".modal").modal("hide");
                        }
                    });
                return false;
            });
        }
    });
})(window.jQuery);

解决方法

Live example

您现在正在做的是尝试删除微调器上的 .d-none (display: none!important) 类，它的工作速度比内容加载慢。你应该做的是相反的事情：默认情况下应该显示微调器，你需要在内容加载时隐藏它。因此，您需要删除所有带有 display !important（d-flex，d-none）的类，需要隐藏内容加载的微调器，并且需要 在模态关闭时显示它。

添加了 CSS：

.spinner {
  display: flex;
}

jQuery：

(function ($) {
    "use strict";

    $(window).on("load",function () {
        if ($(".modal").length) {
            $(".modal").modal("show");
            $(".modal").on("shown.bs.modal",function (e) {
                e.preventDefault();
                $(".spinner")
                    .delay(3000)
                    .fadeOut(500);
                return false;
            });
            $(".btn-close").on("click",function (e) {
              
                e.preventDefault();
                var swalWithBootstrapButtons = Swal.mixin({
                    customClass: {
                        confirmButton: "btn btn-primary",cancelButton: "btn btn-danger me-3",},buttonsStyling: false,});
                swalWithBootstrapButtons
                    .fire({
                        title: "Are you sure?",text: "You won't be able to revert this!",icon: "warning",confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes,I am!",cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No,I'm Not",showCancelButton: true,reverseButtons: true,focusConfirm: false,})
                    .then((result) => {
                        if (result.isConfirmed) {
                          $(".modal").modal("hide");
                          $(".spinner").delay(1000).show(100);
                        }
                    });
                return false;
            });
        }
    });
})(window.jQuery);