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">
<div class="outside" data-fancybox-href="#content">OUT
    <div class="inside" data-fancybox-href="#content">IN</div>
</div>
<div id="content">content</div>

CSS

.outside {
    background :yellow;
    height:100px;
    width:100px;
}
.inside {
    background : orange;
    height:50px;
    margin:0 25px;
    width:50px;
}

#content
{
    display:none;
}

JavaScript

jQuery(".outside").fancybox({
    beforeLoad: function () {
        alert("outside");
    }
});

jQuery(".inside").fancybox({
    beforeLoad: function () {
        alert("inside");
    }
});