Bootstrap V5 & jQuery: 再次打开模态时关闭事件不会return

Question

我使用 sweetalert2 在我的 模态关闭事件 中添加了一些特殊功能，但是当我第一次关闭模态时我遇到了一些问题时间关闭事件在我打开时不再出现。

实例：

https://codepen.io/themes4all/pen/oNWeYzp

注：

to know exactly what I'm talking about trying to close the modal and opened and closed again.

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");
                    });
            });
            $(".modal").on("hide.bs.modal", 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) {
                            $(this).off("hide.bs.modal").modal("hide");
                            $(".modal-backdrop").remove();
                            $("body").removeClass("modal-open").removeAttr("style");
                        }
                    });
            });
        }
    });
})(window.jQuery);

Answer 1

从关闭按钮中删除 data-bs-dismiss 属性。
不是在隐藏时调用方法，而是在单击关闭按钮时调用 sweetalert。
并在确认 sweetalert 后，只需 $(".modal").modal("hide") 这应该有效。

JSFiddle

Bootstrap V5 & jQuery: 再次打开模态时关闭事件不会return

Bootstrap V5 & jQuery: The close event does not return when opened the modal again

javascript

jquery

bootstrap-modal

bootstrap-5