动态创建与内容填充 FancyBox 5 模态框教程

@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 创建动态内容元素
        var modalContentDiv = document.createElement('div');
        modalContentDiv.id = 'dynamic-success-modal'; // 确保ID唯一
        // 初始隐藏该元素，防止在 FancyBox 渲染前闪现
        modalContentDiv.style.display = 'none';
        modalContentDiv.innerHTML = `
            <div style="padding: 20px; text-align: center;">
                <h2>操作成功！?</h2>
                <p>您的请求已成功处理。感谢您的耐心等待。</p>
                <button data-fancybox-close class="button" style="margin-top: 15px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">
                    确定
                </button>
            </div>
        `;

        // 2. 将内容元素添加到 DOM 中
        // FancyBox 的 'inline' 类型需要引用的元素在 DOM 中可见或存在
        document.body.appendChild(modalContentDiv);

        // 3. 使用 Fancybox.show() 引用该元素
        Fancybox.show([
            {
                src: '#dynamic-success-modal', // 引用已存在的DOM元素
                type: 'inline',
                // 其他可选配置，如动画效果
                transition: 'fade'
            }
        ]);
    });
</script>
@endif

@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 示例 1: 直接传递 HTMLElement 对象
        var successMessageElement = document.createElement('div');
        successMessageElement.innerHTML = `
            <div style="padding: 20px; text-align: center;">
                <h3>操作成功！</h3>
                <p>这是通过直接传递 HTML 元素创建的模态框。</p>
                <button data-fancybox-close style="margin-top: 15px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">
                    关闭
                </button>
            </div>
        `;

        Fancybox.show([
            {
                src: successMessageElement, // 直接传递 HTMLElement 对象
                type: 'html',
                // 其他可选配置
                autoFocus: false // 避免自动聚焦到模态框内部元素
            }
        ]);

        // 示例 2: 直接传递 HTML 字符串 (如果内容简单，也可以这样做)
        // Fancybox.show([
        //     {
        //         src: '<div style="padding: 20px; text-align: center;"><h4>提示</h4><p>此内容直接由HTML字符串生成。</p></div>',
        //         type: 'html'
        //     }
        // ]);
    });
</script>
@endif

// 假设您已有一个 FancyBox 模态框正在显示
// 模拟一个场景：模态框打开后，异步加载更多信息并更新内容

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

    if (fancyboxInstance) {
        const currentSlide = fancyboxInstance.getSlide(); // 获取当前活动幻灯片对象

        if (currentSlide) {
            // 模拟异步数据加载
            setTimeout(() => {
                // 1. 清除当前幻灯片内容
                fancyboxInstance.clearContent(currentSlide);

                // 2. 准备新的内容
                const updatedContent = `
                    <div style="padding: 30px; text-align: center;">
                        <h3>内容已更新！✅</h3>
                        <p>这是在模态框打开后，通过异步操作加载并显示的新内容。</p>
                        <ul style="list-style: none; padding: 0;">
                            <li><strong>状态：</strong> 完成</li>
                            <li><strong>时间：</strong> ${new Date().toLocaleTimeString()}</li>
                        </ul>
                        <button data-fancybox-close style="margin-top: 20px; padding: 10px 25px; background-color: #6c757d; color: white; border: none; border-radius: 5px; cursor: pointer;">
                            关闭模态框
                        </button>
                    </div>
                `;

                // 3. 设置新的内容
                // false 表示不强制重绘，FancyBox 会智能处理
                fancyboxInstance.setContent(currentSlide, updatedContent, false);

                // 如果需要，可以在这里调整模态框大小以适应新内容
                fancyboxInstance.update();

            }, 1500); // 模拟1.5秒延迟
        }
    }
}

// 假设在某个事件（例如按钮点击或模态框打开后）调用此函数
// 例如，可以在 FancyBox 的 'afterShow' 回调中调用：
// Fancybox.show([
//     {
//         src: '<div><p>加载中...</p><button onclick="updateFancyboxContent()">点击更新</button></div>',
//         type: 'html',
//         on: {
//             afterShow: (fancybox, slide) => {
//                 // 模态框显示后，立即触发内容更新
//                 // updateFancyboxContent(); // 或者在用户交互后触发
//             }
//         }
//     }
// ]);

// 为了演示，我们直接调用它，假设模态框已经存在
// updateFancyboxContent(); // 在实际应用中，这应该由事件触发