laravel 如何从cero创建一个fancybox并向其添加内容

w6lpcovy  于 2023-05-19  发布在  其他
关注(0)|答案(1)|浏览(105)

我使用FancyBox库,版本:5来创建模态,当我使用文档中提到的基本方法将“data-fancybox”属性添加到标记时,一切都很好。到目前为止,一切顺利。现在我试图从零开始创建一个新的模型,这取决于会话是否成功,并需要添加内容。
我已经试过下面的代码,它的工作原理...部分地,它创建空模态。我似乎无法添加所需的内容。根据文档,我应该使用setContent()函数并传递给它一个HTMLElement。
下面是我的代码:

@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

出于某种原因,modalDiv变量是一个对象。我做错了什么?
顺便说一下,我在一个Laravel项目中,这段代码在一个刀片文件中,尽管我不认为这有太大关系。
先谢谢你。

5vf7fwbs

5vf7fwbs1#

以下是如何更改幻灯片上的内容的示例:

const fancyboxInstance = Fancybox.getInstance();
const currentFancyboxSlide = Fancybox.getSlide(); 

fancyboxInstance.clearContent(currentFancyboxSlide);
fancyboxInstance.setContent(currentFancyboxSlide, "Another content", false);

https://jsfiddle.net/j6hnbd4w/
但在您的情况下,可能只是更改ID为modal的元素的内容。

相关问题