JSFiddle - React, Tailwind, and code Playground

by Ryan Kethcart

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;
}

.overrideLoading{
    color: white;
    position: absolute;
    top: 86px;
    left: 16px;
}


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