JSFiddle - React, Tailwind, and code Playground

by ericf

HTML

<html>
    <head>
    </head>
    <body class="yui3-skin-sam">
        <div id="pnlModal">
            <div class="yui3-widget-bd">Modal Panel</div>
        </div>
        <div id="pnlRegular">
            <div class="yui3-widget-bd">Regular Panel</div>
        </div>
        <button type="button" id="btnModal">Show Modal</button>
        <button type="button" id="btnRegular">Show Regular</button>
    </body>
</html>

JavaScript

YUI().use('panel', function(Y) {

    var pnlModal = new Y.Panel({
        srcNode: "#pnlModal",
        visible: false,
        modal: true,
        centered: true,
        render: true
    });

    var pnlRegular = new Y.Panel({
        srcNode: "#pnlRegular",
        render: true,
        visible: false,
        centered: true,
        modal: false
    });


    Y.one("#btnModal").on("click", function() {
        pnlModal.show();
    });
    Y.one("#btnRegular").on("click", function() {
        pnlRegular.show();
    });
});