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">
<script src="https://rawgithub.com/starfishmod/jquery-oembed-all/master/jquery.oembed.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/starfishmod/jquery-oembed-all/master/jquery.oembed.css">
<ul id="target">
    <li>1111111111111</li>
    <li>22222222222222</li>
    <li>33333333333333</li>
    <li>44444444444444</li>
    <li>555555555555555</li>
    <li>66666666666666</li>
</ul>
<div id="overlay"></div>
<br>
<br>
<div type="button" class="on">on</div>
<div type="button" class="off">off</div>

CSS

#dummy {
    display: none;
}
#target {
    display:inline-block;
}
#overlay {
    display:none;
    position: absolute;
    background: rgba(0, 0, 0, .5);
}
.fancybox-inner iframe {
    display: block;
    width: 100%;
    height: 100%;
}
.waitText {
    position: fixed;
    margin: auto;
    color: white;
    text-align: center;
}

JavaScript

$(".on").click(function () {
    var target = $('#target');
    var overlay = $('#overlay');
    overlay.width(target.width()).height(target.height()).css({
        'left': target.position().left,
        'top': target.position().top
    }).fadeIn(200);
    $.fancybox.showLoading();
    $('#fancybox-loading').css({
        'left': (target.width() - $('#fancybox-loading').width()) / 2,
        'top': (target.height() - $('#fancybox-loading').height()) / 2,
        'margin': 0
    });
    var labelWidth = 80;
    $('body').append($('<span>', {
        'class': 'waitText'
    }).text("Please Wait").css({
        'width': labelWidth,
        'left': (target.width() - labelWidth) / 2,
        'top': ((target.height() - $('#fancybox-loading').height()) / 2) + $('#fancybox-loading').height()
    }));
});
$(".off").click(function () {
    $('#overlay').fadeOut(200);
    $.fancybox.hideLoading();
    $('.waitText').remove();
});