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>
<br/>    
<div type="button" class="onDefault">Show Default loading </div>
<div type="button" class="offDefault">Hide Default loading  </div>

CSS

#dummy {
    display: none;
}

#fancybox-loading{
    background-repeat: no-repeat;
    background-position: center -108px;
    text-align: center;
}
#fancybox-loading div{
    margin: auto;
}
.overrideLoading{
	background: none !important;
    color: white;
    width: 92px !important;
}



#target {
    display:inline-block;
}

#overlay {
    display:none;
    position: absolute;
    background: rgba(0,0,0,.5);
}

.fancybox-inner iframe {
    display: block;
    width: 100%;
    height: 100%;
}

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').append("<div class='overrideLoading'>Please Wait...</div>");
    
    $('#fancybox-loading').css({
    	'left': (target.width() - $('#fancybox-loading').width()) / 2,
        'top': (target.height() - $('#fancybox-loading').height()) / 2,
        'margin': 0
    });


    
});
$(".off").click(function(){
    $('#overlay').fadeOut(200);
	$.fancybox.hideLoading(); 
});

$(".onDefault").click(function(){
    $.fancybox.showLoading();
});
$(".offDefault").click(function(){
   $.fancybox.hideLoading(); 
});