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 href="http://jsfiddle.net" class="fancybox-flyout">open iframe</a>
JavaScript
$(document).ready(function () {
$(".fancybox-flyout").fancybox({
padding: 5,
openEffect: 'elastic',
openSpeed: 150,
closeEffect: 'elastic',
closeSpeed: 150,
closeClick: false, // <--use false if you want interaction inside your iframe
helpers: {
overlay: true
},
type: "iframe" // <-- you may need this too ;)
});
});