JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div id="newload">

<script src="http://cdn.eyahuska.com/paper.js"></script>
<script src="js/vid.js"></script>
<script type="text/paperscript" src="js/paper_nosplat.js" canvas="mycanvas"></script>
<canvas resize="true" id="mycanvas"></canvas>

<script type="text/javascript">
    $(document).ready(function () {
        $("#close_overlay").on("click", function () {
            var canvas = document.getElementById('mycanvas');
            var imageUrl = canvas.toDataURL("image/png");
            $('#main_overlay').css('opacity', '0');
            $('#main_overlay').css('display', 'none');
            $('#main_overlay').css('visibility', 'hidden');
            $('.main-container').css('background-image', 'url(' + imageUrl + ')');
            $('#newload').remove();
        });
    });
</script>

</div>

JavaScript

// heres how I load the file 

$(document).ready(function () {
    $("#load_overlay").on("click", function () {
        $('.main-container').css('background-image', '');
        $('#main_overlay').css('opacity', '1');
        $('#main_overlay').css('display', 'block');
        $('#main_overlay').css('visibility', 'visible');

         $.ajax({
              url: '/layout_modal/loadOne.html',
              cache: true
            })
              .done(function( html ) {
                $('#main_overlay').append( html );
              });


    });
});