Search code examples
jqueryvue.jsfancyboxbootstrap-modal

Open jquery Fancybox in b-modal VueJS

I am trying to open a simple fancybox in a bootstrap modal. When i open only simple fancybox:

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

it works good like this, my PDF is displayed in a lightbox.
When i try to put my fancybox in a b-modal:

<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>

when i click on "Open", my PDF is opened in a new page like a simple link href. I would like to open the fancybox and display my PDF normaly in my modal. Some ideas? Thanks

Solution

  • Just as @Janis said it might be the case that fancybox executes before it can find the link . One workaround is to open the b-modal with a method and execute the fancybox there.

    So give your modal a ref like ref="myModal" and remove v-modal like:

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

    Create a method showModal in methods

    Inside the showModal function write the following code

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