JSFiddle - React, Tailwind, and code Playground

by Nibin George

HTML

<script src="http://viptreatz.com/ncpl/videoscrollingfiles/jquery.min.js"></script>
<script src="http://viptreatz.com/ncpl/talentprofilesimagefiles/jquery.popup.js"></script>
<link rel="stylesheet" href="http://viptreatz.com/ncpl/talentprofilesimagefiles/popup.css">
<script src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<a href="https://www.google.com/images/srpr/logo11w.png" class="popup_gallery">
<img src="https://www.google.com/images/srpr/logo11w.png">
  </a>

CSS

/* Some basic style resets to make the page look slightly nicer */

/* Gallery */
[href="#next"] {
    float: right;
}
[href="#prev"] {
    float: left;
}
[href="#next"], [href="#prev"] {
    padding-top: 10px;
}
div.popup {
    overflow-x: hidden;
    overflow-y: hidden;
    width:20% height:auto;
}

JavaScript

$(function () {

    /*-------------------------------

				GENERAL EXAMPLES

			-------------------------------*/

    // Default usage
    $('.default_popup').popup();

    // Function for content
    $('.function_popup').popup({
        content: function () {
            return '<p>' + $(this.ele).attr('title') + '</p>';
        }
    });

    // jQuery for content
    $('.jquery_popup').popup({
        content: $('#inline')
    });

    // HTML for content
    $('.html_popup').popup({
        content: '<h1>This is some HTML</h1>',
        type: 'html'
    });

    // Custom YouTube content
    $('.youtube_popup').popup({
        types: {
            youtube: function (content, callback) {

                content = '<iframe width="420" height="315" src="' + content + '" frameborder="0" allowfullscreen></iframe>';

                // Don't forget to call the callback!
                callback.call(this, content);

            }
        },
        width: 420,
        height: 315
    });

    // Animated popup
    $('.animated_popup').popup({
        show: function ($popup, $back) {

            var plugin = this,
                center = plugin.getCenter();

            $popup.css({
                top: -$popup.children().outerHeight(),
                left: center.left,
                opacity: 1
            })
                .animate({
                top: center.top
            }, 500, 'easeOutBack', function () {
                // Call the open callback
                plugin.o.afterOpen.call(plugin);
            });

        }
    });

    // Call ALL the callbacks
    $('.callback_popup').popup({
        beforeOpen: function (type) {
            console.log('beforeOpen -', type);
        },
        afterOpen: function () {
            console.log('afterOpen');
        },
        beforeClose: function () {
            console.log('beforeClose');
        },
        afterClose: function () {
            console.log('afterClose');
        }
    });

    //...