Dialog, show things nicely

Dialog is a javascript library based on the PrototypeJS framework. Communicate easily with your visitors by a typical Web2.0 dialog window.

Recommended doctype: XHTML 1.0 Transitional

by Roland Franssen

Demo's & Example codes


Handle Description Code
Predefined Dialogs ^
Alert me! Dialogs default static alert function. $('dialog_alert').observe('click', function(){
        Dialogs.alert('Some alert message');
});
Confirm me! Dialogs default static confirm function. $('dialog_confirm').observe('click', function(){
        Dialogs.confirm(
                'Some confirm message',
                function(){
                        alert('Clicked yes!');
                        Dialogs.close();
                },
                function(){
                        alert('Clicked no!');
                        Dialogs.close();
                }
        );
});
Event handlers ^
Dialog #1 Default dialog with a classname attached to the content block. #dialog-container .myFirstDialog { color:orange; font-size:20px }
<a href="javascript:;" id="dialog_1">Dialog #1</a>
new Dialog({
        handle:'#dialog_1',
        title:'Dialog #1',
        content:'Some content (#1)',
        className:'myFirstDialog'
});
Dialog #2a, Dialog #2b Multiple event handlers for the same dialog. <a href="javascript:;" class="dialog_2">Dialog #2a</a>,
<a href="javascript:;" class="dialog_2">Dialog #2b</a>
new Dialog({
        handle:'a.dialog_2',
        title:'Dialog #2',
        content:'Some content (#2)'
});
Dimensions ^
Dialog #3 Fixed width/height dimensions. new Dialog({
        handle:'#dialog_3',
        title:'Dialog #3',
        content:'Some content (#3)',
        width:300,
        height:600
});
Dialog #4 Maximum width/height dimensions, including padding & margin offsets. new Dialog({
        handle:'#dialog_4',
        title:'Dialog #4',
        content:'Some content (#4)',
        width:'max',
        height:'max',
        padding:25,
        margin:50
});
Contents ^
Dialog #5 Single DOM object as content. new Dialog({
        handle:'#dialog_5',
        title:'Dialog #5',
        content:new Element('span', {style:'color:red'}).update('DOM Element')
});
Dialog #6 Multiple DOM objects and/or HTML strings as content. new Dialog({
        handle:'#dialog_6',
        title:'Dialog #6',
        content:[
                '<strong>Bold</strong> ',
                new Element('span', {style:'color:green'}).update('Green '),
                '<em>Italic</em>'
        ]
});
Dialog #7 Extended content. new Dialog({
        handle:'#dialog_7',
        title:'Dialog #7',
        content:function(){
                var element = new Element('a', {href:'javascript:;'});
                element.update('Click me!').observe('click', function(){
                        alert('Hi there...');
                });
                return element;
        }
});
Dialog #8 Use dialog in steps or as gallery. (Bonus: Use your left/right keyboard arrows to navigate.) new Dialog({
        handle:'#dialog_8',
        title:'Dialog #8',
        content:$H({
                'Step 1':'Content for step 1',
                'Step 2':new Element('span', {style:'color:red'}).update('Content for step 2'),
                'Step 3':'Content for step 3'
        })
});
Targets ^
Dialog #9
Im a div element with ID #dialog_9_target
 Fetch source content for dialog. (Auto open this dialog, click here, and hit F5.) <div id="dialog_9_target">Im a div element with ID #dialog_9_target</div>
new Dialog({
        handle:'#dialog_9',
        title:'Dialog #9',
        target:{
                id:'dialog_9_target',
                auto:true
        }
});
AJAX ^
Dialog #10 Simple PHP file loaded by AJAX (ajax.text.php). new Dialog({
        handle:'#dialog_10',
        title:'Dialog #10',
        ajax:{
                url:'ajax.text.php',
                options:{
                        parameters:{
                                'key':'value'
                        },
                        onComplete:function(t){
                                alert('Im done!');
                        }
                }
        }
});
Dialog #11 JSON string generated by PHP loaded with AJAX and parsed into a template (ajax.json.php, be patient; PHP lets it sleep for a few seconds). new Dialog({
        handle:'#dialog_11',
        title:'Dialog #11',
        ajax:{
                url:'ajax.json.php',
                jsonTemplate:'<strong>#{item_1}</strong><br /><em>#{item_2}</em><br /><u>#{item_3}</u>'
        }
});
Iframe ^
Dialog #12 Google.com loaded in an iframe as content for Dialog. new Dialog({
        handle:'#dialog_12',
        title:'Dialog #12 (Google.com)',
        width:'max',
        height:'max',
        padding:0,
        margin:75,
        iframe:'http://www.google.com',
        afterIframeLoad:function() {
                alert('Google.com is loaded!');
        }
});
Closing ^
Dialog #13 Disable close link and closing by clicking the overlay. new Dialog({
        handle:'#dialog_13',
        title:'Dialog #13',
        content:'Close by pushing the ESC button',
        close:{
                link:false,
                overlay:false,
                esc:true
        }
});
Dialog #14 Close by using Dialogs static function. (Note: because no title is given and closing link is disabled the top-header is completely hidden.) new Dialog({
        handle:'#dialog_14',
        content:'I can only be closed by clicking <a href="javascript:Dialogs.close();">here</a>.',
        close:{
                link:false,
                overlay:false,
                esc:false
        }
});
Callbacks ^
Dialog #15 All available callback functions. new Dialog({
        handle:'#dialog_15',
        title:'Dialog #15',
        content:'Some content (#15)',
        afterClick:function(event){
                alert('Handler: ' + event.element().identify());
        },
        afterOpen:function(){
                alert('Im open');
        },
        afterClose:function(){
                alert('Im closed');
        }
});
Misc. ^
Dialog #16 Disable inner scrolling. new Dialog({
        handle:'#dialog_16',
        title:'Dialog #16',
        content:'Some long content and fixed width/height to enable scrollbars, but we disabled them by default.',
        width:150,
        height:50,
        innerScroll:false
});
Dialog #17 Change the basic colors and overlay opacity. new Dialog({
        handle:'#dialog_17',
        title:'Dialog #17',
        content:'Some content (#17)',
        opacity:.5,
        width:600,
        height:500,
        background:['#f30', '#fff url(some_picture.png) no-repeat 0 0']
});
Dialog #18
Activate		 Dialogs open/close class methods for more complex code. (Note: don't assign the handle option.) <input type="checkbox" id="dialog_18_activate" /> Activate
var modal = new Dialog({
        title:'Dialog #18',
        content:'Some content (#18)'
});
$('dialog_18').observe('click', function(){
        if($F('dialog_18_activate') == 'on')
                modal.open();
});