JSFiddle - React, Tailwind, and code Playground

by ericf

HTML

<p><button>Show Overlay</button></p>
<p>Pressing "esc" will close the overlay.</p>

CSS

.yui3-overlay-content {
    padding: 3em;
    border: 1px solid silver;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0 1em rgba(0,0,0, 0.2);
    -moz-box-shadow: 0 0 1em rgba(0,0,0, 0.2);
    box-shadow: 0 0 1em rgba(0,0,0, 0.2);
}

JavaScript

YUI().use('overlay', 'widget-autohide', function (Y) {

    // Adds Autohide functionality to all Overlays.
    Y.Base.mix(Y.Overlay, [Y.WidgetAutohide]);
    
    var overlay = new Y.Overlay({
        bodyContent: 'Bla Bla',
        visible    : false,
        centered   : true,
        render     : 'body'
    });
    
    Y.one('body').addClass('yui3-skin-sam');
    Y.one('button').on('click', function () {
        overlay.show();
    });

});