JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://raw.github.com/voronianski/jquery.avgrund.js/master/style/avgrund.css">
<button id="opener">Open Dialog</button>

<div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

CSS

html, body {
    height: 100%;
    overflow: auto; /* TIP: set it to 'auto' if you have long content pages */
}

.avgrund-popin {
    position: absolute;
    background: #fff;
    padding: 10px;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    top: 50%;
    left: 50%;
    z-index: 1000;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .5);

    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

.avgrund-overlay {
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 101;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
}

body.avgrund-ready, 
.avgrund-ready .avgrund-popin, 
.avgrund-ready .avgrund-overlay {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    -ms-transition: 0.3s all ease-out;
    -o-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out
}

body.avgrund-active {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

.avgrund-active .avgrund-popin {
    visibility: visible;
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.avgrund-active .avgrund-overlay {
    visibility: visible;
    opacity: .5;
    filter: alpha(opacity=50);
}

.avgrund-popin.stack {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

.avgrund-active .avgrund-popin.stack {
   ...

JavaScript

$.effects.avgrund = function(o) {
    return this.queue(function() {
        var elem = $(this);
        var overlay = $(".ui-widget-overlay");
        
        overlay.addClass("avgrund-overlay");
        $(document.body).addClass("avgrund-active");
        elem.show();
        elem.dequeue();        
    });
};

$("#dialog").dialog({
    autoOpen: false,
    dialogClass: "avgrund-popin",
    show: "avgrund",
    modal: true,
    hide: "explode"
});

$("#opener").click(function() {
    $("#dialog").dialog("open");
    return false;
});