Fork me on GitHub
Click here to see the "flat" theme

1. Default dialog box, no custom settings. Click here to open.

                    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
                    

2. The five dialog box types, with titles: error, warning, question, information and confirmation.

                    // this example is for the "error" box only
                    // for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
                    // and the text for the "title" property also changes
                    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                        type: 'error',
                        title: 'Error'
                    });
                    

3. Custom buttons and the callback function. Click here to open.

Note that the onClose event is executed *after* the dialog box is closed! see the next example for executing functions *before* the closing of the dialog box

                    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                        type: 'question',
                        title: 'Custom buttons',
                        buttons: ['Yes', 'No', 'Help'],
                        onClose: function(caption) {
                            alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
                        }
                    });
                    

3.1 Custom buttons with attached callback functions. Click here to open.

Note that the callback functions attached to custom buttons are executed *before* the dialog box is closed and as soon as a button is clicked! see the previous example for executing functions *after* the closing of the dialog box

                    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                        type: 'question',
                        title: 'Custom buttons',
                        buttons: [
                            {caption: 'Yes', callback: function() { alert('"Yes" was clicked'); }},
                            {caption: 'No', callback: function() { alert('"No" was clicked'); }},
                            {caption: 'Cancel', callback: function() { alert('"Cancel" was clicked'); }}
                        ]
                    });

4. Position the dialog box in the top-right corner. Click here to open.

                    $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                        title: 'Custom positioning',
                        position: ['right - 20', 'top + 20']
                    });

5. Use as a notification widget - no buttons and close automatically after 2 seconds.

Note how the plugin needs to be instantiated with the "new" keyword or only the last opened box will close!

Click here to open.

                    new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
                        buttons: false,
                        modal: false,
                        position: ['right - 20', 'top + 20'],
                        auto_close: 2000
                    });

6. Content loaded from an inline souce. Click here to open.

                    new $.Zebra_Dialog({
                        source: {inline: $('#boxcontent').html()},
                        width: 600,
                        title: 'Inline content'
                    });

7 External content loaded via AJAX. Click here to open.

                    new $.Zebra_Dialog({
                        source: {ajax: 'ajax.html'},
                        width: 600,
                        title: 'External content loaded via AJAX'
                    });

7.1 External content loaded in an iFrame. Click here to open.

                    new $.Zebra_Dialog({
                        source: {iframe: {
                            src: 'http://en.m.wikipedia.org/wiki/Dialog_box',
                            height: 500
                        }},
                        width: 800,
                        title: 'External content loaded in an iFrame'
                    });
                    

8. Customizing the appearance - make the title bar have a dark-blue background and show a custom icon!

The CSS is

                    /* Notice how we're targting the dialog box's title bar through the custom class */
                    .myclass .ZebraDialog_Title {
                        background: #330066;
                    }
                    .myclass .ZebraDialog_Body {
                        background-image: url('coffee_48.png');
                    }
                    

Click here to open.

                    new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', {
                        custom_class: 'myclass',
                        title: 'Customizing the appearance'
                    });