Открыть jquery Fancybox в b-модальный VueJS - PullRequest
Новая
       15

Открыть jquery Fancybox в b-модальный VueJS

0 голосов
/ 12 сентября 2018

Я пытаюсь открыть простую коробку в модальности начальной загрузки.Когда я открываю только простой 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>

, когда я нажимаю «Открыть», мой PDF открывается на новой странице, как простая ссылка href.Я хотел бы открыть fancybox и отобразить мой PDF-файл в моем модальном виде.Некоторые идеи?Спасибо

1 Ответ

0 голосов
/ 12 сентября 2018

Как и сказал @Janis, возможно, fancybox выполнится до того, как сможет найти ссылку. Один из обходных путей - открыть b-модал с помощью метода и выполнить там fancybox.

Так что дайте вашему модалу ref вроде ref="myModal" и удалите v-модал как: 

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

Создать метод showModal в methods

Внутри функции showModal напишите следующий код 

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