JSFiddle - React, Tailwind, and code Playground

by ericf

HTML

<div class="yui3-skin-sam">
    <input type="button" id="showFirstPanelButton" value="Show First Panel">

    <div id="firstPanel">
        <input type="button" id="showSecondPanelButton" value="Show Second Panel">
    </div>
            
    <div id="secondPanel">&nbsp;</div>
</div>

JavaScript

YUI({
    filter  : 'RAW',
    combine : false
}).use("panel", function (Y) {
    
    Y.one("#showFirstPanelButton").on("click", function (e) {
        var panel = new Y.Panel({
            srcNode       : "#firstPanel",
            centered      : true,
            modal         : true,
            render        : true,
            visible       : false,
            zIndex        : 100,
            headerContent : "First Panel"
        });
        
        panel.show();
    });

    Y.one("#showSecondPanelButton").on("click", function (e) {
        var panel = new Y.Panel({
            srcNode       : "#secondPanel",
            centered      : true,
            modal         : true,
            render        : true,
            visible       : false,
            zIndex        : 101,
            headerContent : "Second Panel"
        });
        
        panel.show();
    });
    
});