在 b-modal VueJS 中打开 jquery Fancybox

Question

我正在尝试在 bootstrap 模态中打开一个简单的 fancybox。当我只打开简单的 fancybox 时：

<a class="fancybox" href="http://samplepdf.com/sample.pdf">Open pdf</a>
$(".fancybox").fancybox({
  width  : 600,
  height : 300,
  type   :'iframe'
});

这样效果很好，我的 PDF 显示在灯箱中。
当我尝试将我的 fancybox 置于 b 模态时：

<b-modal
  v-model="modalShow"
  @ok="submit">
  <div class="mb-3">
    <a
      class="fancybox"
      href="http://www.africau.edu/images/default/sample.pdf">
      Open
    </a>
  </div>
</b-modal>

当我单击 "Open" 时，我的 PDF 在新页面中打开，就像一个简单的 link href。我想打开 fancybox 并在我的模式中正常显示我的 PDF。一些想法？谢谢

Answer 1

正如@Janis 所说，可能是 fancybox 在找到 link 之前执行的情况。一种解决方法是使用一种方法打开 b-modal 并在那里执行 fancybox。

所以给你的模态一个参考 ref="myModal" 并删除 v-modal 像：

   <b-modal ref="myModal" > 
   </b-modal>

在 methods

中创建方法 showModal

在 showModal 函数中写入如下代码

 methods:{
   showModal:function(){
     this.$refs.myModal.show();
     $(".fancybox").fancybox({
      width  : 900,
      height : 450
     });
   }
 }

在 b-modal VueJS 中打开 jquery Fancybox

Open jquery Fancybox in b-modal VueJS

jquery

fancybox

bootstrap-modal

vue.js