JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<a class="buttonl" data-fancybox-type="iframe" href="https://partners.adobe.com/public/developer/en/xml/AdobeXMLFormsSamples.pdf">Open pdf</a>
<br />
<a class="buttonl" href="#inline">open inline content</a>

<div id="inline" style="display:none">
    <p>Lorem Ipsum</p>
</div>

JavaScript

/*
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        width: 600,
        height: 300,
        type: 'iframe',
        iframe: {
            preload: false
        }
    });
}); // ready
*/

jQuery(document).ready(function ($) {
    $("a.buttonl").fancybox({
        maxWidth: 800,
        fitToView: false,
        width: '70%',
        height: '70%',
        autoSize: false,
        closeClick: false,
        openEffect: 'elastic',
        closeEffect: 'elastic',
        afterLoad: function () {
            if (this.type == "iframe") {
                $.extend(this, {
                    iframe: {
                        preload: false
                    }
                })
            }
        }
    });
})