FancyBox v5：动态创建与内容管理深度指南

// 假设在Laravel Blade模板中根据会话状态触发
@if(session('success'))
    <script>
        // 1. 创建一个HTML元素作为模态框的内容容器
        var modalContentDiv = document.createElement('div');
        modalContentDiv.id = 'dynamic-modal-content'; // 为元素设置一个ID
        modalContentDiv.style.display = 'none'; // 初始时隐藏，避免闪烁或不必要的显示
        modalContentDiv.innerHTML = '<h2>操作成功！</h2><p>您的请求已成功处理。</p><button data-fancybox-close>关闭</button>';

        // 2. 将创建的元素添加到DOM中（例如，添加到body的末尾）
        document.body.appendChild(modalContentDiv);

        // 3. 调用Fancybox.show()，指向已存在的DOM元素
        Fancybox.show([
            {
                src: '#dynamic-modal-content', // 指向已添加到DOM的元素ID
                type: 'inline',
                // 其他可选配置，例如动画、尺寸等
                transition: false, // 禁用过渡动画
                autoFocus: false, // 禁用自动聚焦
            }
        ], {
            // 全局FancyBox配置
        });

        // 注意：此时不需要再调用 fancy.setContent()，因为内容已在元素中预设
    </script>
@endif

// 假设你有一个FancyBox实例已经打开
// 例如，通过 Fancybox.show() 返回的实例，或者通过 Fancybox.getInstance() 获取

// 获取当前活跃的FancyBox实例
const fancyboxInstance = Fancybox.getInstance();

if (fancyboxInstance) {
    // 获取当前显示的幻灯片对象
    const currentFancyboxSlide = fancyboxInstance.getSlide();

    if (currentFancyboxSlide) {
        // 1. 清除当前幻灯片的内容（可选，但推荐在替换大量内容时使用）
        fancyboxInstance.clearContent(currentFancyboxSlide);

        // 2. 设置新的内容
        // 第一个参数是幻灯片对象
        // 第二个参数是新的内容，可以是HTML字符串、DOM元素或Promise
        // 第三个参数 (可选) 是一个布尔值，表示是否自动调整大小 (默认为 true)
        fancyboxInstance.setContent(currentFancyboxSlide, "<h3>新的动态内容已加载！</h3><p>这是在模态框打开后更新的文本。</p>", true);

        // 如果内容是异步加载的，你也可以传递一个Promise
        // fancyboxInstance.setContent(currentFancyboxSlide, fetch('/api/data').then(response => response.text()));

        // 如果内容是一个DOM元素
        // const newDiv = document.createElement('div');
        // newDiv.textContent = '这是一个新的DOM元素内容';
        // fancyboxInstance.setContent(currentFancyboxSlide, newDiv);
    }
}