JSFiddle - React, Tailwind, and code Playground

by jie830413

HTML

<button id="btn">Open Window</button><br />

CSS

.yui3-widget {outline:none}
.yui3-widget-mask {background-color:black; opacity:.1}
.yui3-facebook {font-family: "lucida grande",tahoma,verdana,arial,sans-serif; font-size:14px; background:none; border:10px solid rgba(0,0,0,0.445);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:0;}
.yui3-facebook .yui3-widget-hd {padding:8px 10px; background:none; background-color:#6D84B4; color:white; font-weight:bold;border:1px solid #3B5998; border-bottom:none}
.yui3-facebook .yui3-widget-bd {padding:15px; background:white; text-align:center;border:1px solid #3B5998; border-top:none;border-bottom:none}
.yui3-facebook iframe {border:none; overflow:hidden; width:380px; height:80px}
.yui3-facebook .yui3-widget-bd .fbUrl {text-align:left; background-color: #F2F2F2; margin:-15px -15px 10px -15px; border-bottom: 1px solid #CCCCCC; color: #999999; font-size: 12px; font-weight: 400; line-height: 1.2; padding: 9px 10px;}
.yui3-facebook .yui3-widget-ft {background-color:#F2F2F2;border:1px solid #3B5998; border-top:1px solid #ccc; text-align:right; padding:10px 0px 12px 0px;} 
.yui3-facebook .yui3-widget-ft a {border: 1px solid #2A437E; color: #FFFFFF; font-size: 13px; font-weight: 700; margin:0px 10px 0 0; padding: 3px 6px; text-decoration: none; border-color: #29447E #29447E #1A356E; background-image: url("http://static.ak.fbcdn.net/rsrc.php/v1/yh/r/ygNt2LRjO5d.png"); background-position: 0 -98px;} 
.yui3-facebook-hidden {visibility:hidden}

JavaScript

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

    var FbLike, fb;
    
    FbLike = Y.Base.create('facebook', Y.Overlay, [Y.WidgetModality, Y.WidgetAutohide], {
        bindUI: function () {
            this.get('boundingBox').delegate('click', function (e) {
                e.preventDefault();
                this.hide();
            }, '.close', this);
        }
    }, {
        ATTRS: {
            width   : {value: 400},
            zIndex  : {value: 100},
            visible : {value: false},
            centered: {value: true},
            modal   : {value: true},
            render  : {value: true},
            
            headerContent: {value: 'Title'},
            bodyContent  : {value: '<div class="fbUrl">Subtitle</div><div class="fb-like">content</div>'},
            footerContent: {value: '<a class="close" href="#">Close</a>'},

            hideOn: {
                valueFn: function () {
                    return [{eventName: 'clickoutside'}];
                }
            }
        }
    });
    
    Y.Base.plug(FbLike, Y.Plugin.Drag);
    
    Y.one('body').addClass('yui3-skin-sam');
    
    fb = new FbLike();
    Y.one('#btn').on('click', function () { fb.show(); });
});