如何解决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);
解决方法
您现在正在做的是尝试删除微调器上的 .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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。