Software engineering notes

YUI 2in3 Modal Panel Example

Suppose you’re using YUI 3.2 and you’d like a modal dialog.  YUI 3 Overlay provides an easy way to position an element above the others, but it doesn’t provide modality.  The Overlay Extras gallery module sounds perfect, but it seems to work best with YUI 3.1.0.

YUI 2 has exactly what we’re looking for in its Panel widget.  Fortunately, the YUI 2in3 project makes the Panel available in YUI 3.2.  

The sample code below demonstrates usage, and you can see a demo on
demo-deluxe.heroku.com/static/1/index.html.

    <body class="yui-skin-sam">
            
        <p><button id="show">show modal</button></p>
        
        <!-- modal dialog content markup -->
        <div id="content" style="visibility:hidden">
            <div class="hd">Header</div>
            <div class="bd">
                Body
                <p><button id="hide">hide modal</button></p>
            </div>
            <div class="ft">Footer</div>
        </div>
        
        <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
        <script>
        YUI().use('yui2-container', 'yui2-dragdrop', 'event', function(Y) {

            var YAHOO = Y.YUI2;
            
            var modal = new YAHOO.widget.Panel("content", {
                width: "240px",
                fixedcenter: true,
                close: true,
                draggable: true,
                zindex: 4,
                modal: true,
                visible: false
            });
            modal.render(document.body);

            Y.one('#show').on('click', function() {
                modal.show();
            });
            Y.one('#hide').on('click', function() {
                modal.hide();
            });

        });
        </script>
        
    </body>

 

Written by Erik

January 10, 2011 at 6:04 pm

Posted in Uncategorized

%d bloggers like this: