Flowbite模态框调用show()/hide()后无法再次打开的问题

问题场景 #

用Flowbite模态框实现登录、注册表单切换，每个模态框底部设置切换按钮，点击调用toggleSignInSignUpModals()函数，通过Flowbite内置的hide()和show()方法完成切换。切换功能正常，但切换后关闭模态框，两个模态框均无法再次打开（未使用自定义切换函数时模态框功能完全正常）。

已尝试的无效方案：

• 在onclick函数外实例化模态框，避免重复创建，但二次打开后无法正常关闭（遮罩层未移除）
• 尝试设置isHidden属性、调用destroy()/destroyAndRemoveInstance()/removeInstance()方法、改用toggle()方法，均未解决
• 确认hide()和show()已调用_removeModalCloseEventListeners()和_setupModalCloseEventListeners()

解决方案 #

1. 一次性初始化模态框实例 #

页面加载时完成两个模态框的实例化并保存引用，避免重复创建导致的状态冲突：

document.addEventListener('DOMContentLoaded', () => {
    // 初始化登录模态框
    const signInModal = new Modal(document.getElementById('sign-in-modal'), {
        backdrop: 'static'
    });
    // 初始化注册模态框
    const signUpModal = new Modal(document.getElementById('sign-up-modal'), {
        backdrop: 'static'
    });

    // 挂载到全局方便切换函数调用
    window.signInModal = signInModal;
    window.signUpModal = signUpModal;
});

2. 优化切换逻辑，同步DOM状态 #

切换时增加短延迟确保隐藏动画完成，手动清理残留的遮罩层，再显示目标模态框：

function toggleSignInSignUpModals(fromModal, toModal) {
    // 隐藏当前模态框
    fromModal.hide();
    
    // 等待隐藏动画完成后清理遮罩层并显示目标模态框
    setTimeout(() => {
        // 移除残留的遮罩层
        const backdrop = document.querySelector('.modal-backdrop');
        if (backdrop) backdrop.remove();
        
        // 显示目标模态框
        toModal.show();
    }, 150);
}

// 绑定切换按钮点击事件（确保只绑定一次）
document.getElementById('go-to-signup').addEventListener('click', () => {
    toggleSignInSignUpModals(window.signInModal, window.signUpModal);
});

document.getElementById('go-to-signin').addEventListener('click', () => {
    toggleSignInSignUpModals(window.signUpModal, window.signInModal);
});

3. 同步关闭后的实例状态 #

绑定模态框的关闭事件，手动更新实例的isHidden属性，确保下次打开时状态正确：

// 登录模态框关闭后同步状态
document.getElementById('sign-in-modal').addEventListener('hidden.bs.modal', () => {
    window.signInModal.isHidden = true;
});

// 注册模态框关闭后同步状态
document.getElementById('sign-up-modal').addEventListener('hidden.bs.modal', () => {
    window.signUpModal.isHidden = true;
});

问题根源 #

核心原因是Flowbite模态框切换时，hide()方法的DOM清理（尤其是遮罩层）和实例状态更新不同步，导致下次触发show()时，实例误判模态框仍处于显示状态，无法正常触发打开逻辑。通过手动同步DOM状态和实例属性，即可解决该问题。

内容的提问来源于stack exchange，提问作者nextstep