Erik's blog

Code, notes, recipes, general musings

YUI 2in3 Modal Panel Example

leave a comment »

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>

 

Advertisements

Written by Erik

January 10, 2011 at 6:04 pm

Posted in Uncategorized

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: