Laravel中FancyBox 5从零创建模态框并添加内容失败求助

在Laravel项目的Blade文件中使用FancyBox 5库，通过给标签添加data-fancybox属性的基础用法一切正常，但需要根据session的success状态从零创建带内容的模态框时，仅生成空模态框。按照官方文档尝试使用setContent()函数传入HTMLElement，但modalDiv显示为object却无法成功添加内容，尝试的代码如下：

@if(session('success'))
    <script>
      // Crear el elemento div
      var modalDiv = document.createElement('div');
      modalDiv.id = 'modal';
      // Establecer el contenido del div
      modalDiv.textContent = 'Contenido del Modal';
      // Agregar el div al documento
      // document.body.appendChild(modalDiv);
      var options = {};
      var slide = {
        "isDom": false,
        "transition": false,
        "src": "#modal",
        "type": "inline",
      };
      var fancy = Fancybox.show(slide, options);
      console.dir(typeof modalDiv)
      console.dir(fancy)
      fancy.setContent(modalDiv)
    </script>
@endif

• 错误1：引用了不存在的DOM元素
  代码中设置slide.src = "#modal"，但注释掉了document.body.appendChild(modalDiv)，页面中不存在ID为modal的元素，FancyBox无法找到对应内容，因此显示空模态框。

• 错误2：setContent()的使用逻辑错误
  当通过Fancybox.show()创建实例并指定type: "inline"时，FancyBox会优先尝试加载src对应的DOM元素，后续调用setContent()的时机和方式不符合库的运行逻辑，且未挂载的元素无法被正确识别。

修正方案1：挂载元素到DOM后调用 #

先将创建的元素挂载到页面DOM中，再让FancyBox加载该元素：

@if(session('success'))
<script>
  // 创建元素并挂载到DOM
  var modalDiv = document.createElement('div');
  modalDiv.id = 'modal';
  modalDiv.textContent = 'Contenido del Modal';
  document.body.appendChild(modalDiv);

  // 调用FancyBox显示模态框
  Fancybox.show([{
    src: "#modal",
    type: "inline",
    transition: "slide"
  }]);
</script>
@endif

修正方案2：使用html类型直接传入内容 #

无需将元素挂载到页面DOM，直接通过html类型传入HTMLElement：

@if(session('success'))
<script>
  var modalDiv = document.createElement('div');
  modalDiv.textContent = 'Contenido del Modal';

  // 直接传入元素作为内容
  Fancybox.show([{
    src: modalDiv,
    type: "html",
    transition: "slide"
  }]);
</script>
@endif

关键注意点 #

• 无需手动调用setContent()，FancyBox会根据指定的type自动处理内容渲染
• 使用inline类型时，必须确保目标元素已存在于DOM中
• 使用html类型可直接传入HTMLElement或HTML字符串，无需提前挂载到页面

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