JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<div id="colorbox"></div>

CSS

div { border: solid 1px #ddd; height: 100px; }

JavaScript

$(function() {
    function icisDashBox(settings) {
        
        var options = $.extend({
                            colorHook: "",
                            width: 800,
                            height: 800
                      }, settings || {});

        $(options.colorHook).colorbox({
            transition: 'none',
            innerWidth: options.width,
            innerHeight: options.height,
            opacity: '0.5',
            onOpen: options.openCall,
            onLoad: options.loadCall,
            onComplete: function() {
                $('#cboxLoadedContent').wrap('<div id="icis_dialog_msg" />');
                if(typeof options.onCompleteCall == "function")
                  options.onCompleteCall.call(this);
            },
            onCleanup: options.onCleanupCall,
            onClosed: function() {
                $('#cboxLoadedContent').unwrap();
                if(typeof options.onClosedCall == "function")
                  options.onClosedCall.call(this);
            }
        });
    }

    icisDashBox({
        colorHook: ".example9",
        thisWidth: "600",
        thisHeight: "800",
        onCompleteCall: completeFunction
    });


    function completeFunction() {
        var fooClass = $("#colorbox").addClass("FOO");
        var barClass = $("#colorbox").addClass("BAR");
        
        var ajaxCnt = $.ajax({
            type: "GET",
            url: "http://www.payso.me.uk",
            dataType: "html",
            success: function(data) {
                $("#colorbox").addClass("AJAX SUCCESS");
            }
        });

        return {

            x: fooClass,
            y: barClass,
            z: ajaxCnt

        };
    }
});