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").click(function (event) {
    alert("outside");

    //Stop default action + Stop Event Bubbling
    event.preventDefault();
    event.stopPropagation();

    var elementToShow = jQuery(jQuery(this).attr("data-fancybox-href"));

    jQuery.fancybox({
        content: elementToShow.html()
    });
});

jQuery(".inside").click(function (event) {
    alert("inside");

    //Stop default action + Stop Event Bubbling
    event.preventDefault();
    event.stopPropagation();

    var elementToShow = jQuery(jQuery(this).attr("data-fancybox-href"));

    jQuery.fancybox({
        content: elementToShow.html()
    });
});