JSFiddle - React, Tailwind, and code Playground

by gdanko

HTML

<!doctype html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.7.3/build/cssfonts/fonts-min.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">
    <div id="green" style="margin: 15px; display: block; width: 30px; height: 30px; background-color: green"></div>
    <div id="container"></div>
    <br><br>
</body>
</html>

JavaScript

YUI().use('panel', function(Y) {
    function createWidget() {
        var widget = new Y.Panel({
            srcNode: Y.one('#container'),
            headerContent: 'Dialog Title',
            width: '300px',
            centered: true,
            visible: true,
            draggable: true,
            zIndex: '1000',
            modal: false
        });
        return widget;
    }

    myWidget = createWidget();
    myWidget.render();
    
    Y.one('#green').on('click', function(e) {
        myWidget.show();
    });
});