JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.js"></script>
<a title="text" target="_blanc" href="http://fancyapps.com/fancybox/3/" class="fancyapps" >fancyapps</a>

JavaScript

$(function(){
  $('.fancyapps').on('click', function(e){
    if(window.innerWidth > 767){
      e.preventDefault();
      $.fancybox.open({
        type: 'iframe',
        fitToView   : true,
        width       : '80%',
        height      : '90%',
        autoSize    : true,
        closeClick  : true,
        openEffect  : 'fade',
        closeEffect : 'fade',
        href: this.href,
        iframe: {
          scrolling: 'auto',
          preload: 1
        },
      });
    }
  });
});