FancyBox v5 动态创建模态框与内容注入指南

@if(session('success'))
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 1. 创建一个用于模态框内容的 div 元素
        var modalContentDiv = document.createElement('div');
        modalContentDiv.id = 'dynamic-modal-content'; // 为元素设置一个唯一的ID
        modalContentDiv.style.padding = '30px'; // 增加一些内边距，使内容更美观
        modalContentDiv.style.textAlign = 'center'; // 内容居中
        modalContentDiv.innerHTML = '<h2>操作成功！</h2><p>您的请求已成功处理。</p>'; // 设置HTML内容

        // 2. 将创建的 div 元素添加到文档体中
        // 这一步非常关键，确保 FancyBox 能够通过 ID 找到并引用它。
        document.body.appendChild(modalContentDiv);

        // 3. 配置 FancyBox 幻灯片对象
        var slideOptions = {
            src: '#dynamic-modal-content', // 引用我们刚刚创建的元素的ID
            type: 'inline',                // 指定内容类型为内联元素
            // transition: false,          // 可选：禁用过渡效果
            // showClass: 'fancybox-fadeIn', // 可选：自定义显示动画类
            // hideClass: 'fancybox-fadeOut' // 可选：自定义隐藏动画类
        };

        // 4. 显示 FancyBox 模态框
        Fancybox.show([slideOptions], {
            // 可选的全局配置
            autoFocus: false, // 避免自动聚焦到模态框内的第一个可聚焦元素
            closeExisting: true // 如果有其他 FancyBox 实例正在显示，先关闭它们
        });

        // 提示：在 Fancybox.show() 之后再调用 setContent 是无效的，
        // 因为模态框已经基于 src 渲染了内容。
        // 如果需要修改已打开模态框的内容，请参考方法三。
    });
</script>
@endif

document.addEventListener('DOMContentLoaded', function() {
    // 假设在某个条件下需要显示一个简单的HTML模态框
    const simpleHtmlContent = `
        <div style="padding: 30px; text-align: center;">
            <h2>提示信息</h2>
            <p>这是一个通过直接HTML字符串创建的模态框。</p>
            <button data-fancybox-close>关闭</button>
        </div>
    `;

    Fancybox.show([{
        src: simpleHtmlContent, // 直接传入HTML字符串
        type: 'html',          // 指定内容类型为HTML
        // autoFocus: false,
        // closeExisting: true
    }]);
});

// 假设 FancyBox 模态框已经打开
const fancyboxInstance = Fancybox.getInstance(); // 获取当前激活的 FancyBox 实例

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

    if (currentFancyboxSlide) {
        // 清除当前幻灯片的内容
        fancyboxInstance.clearContent(currentFancyboxSlide);

        // 设置新的内容。第二个参数是新的内容，第三个参数 false 表示不自动聚焦
        fancyboxInstance.setContent(currentFancyboxSlide, "<h3>新内容已加载！</h3><p>这是在模态框打开后更新的内容。</p>", false);

        // 如果新内容高度发生变化，可能需要更新模态框位置和大小
        fancyboxInstance.update();
    }
}