Zebra Dialog

a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes


Download View on GitHub

See the examples with the dialog boxes using the flat or the materialize theme.

Zebra Dialog is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript alert and confirmation dialogs.

Can also be used as a notification widget (when configured to show no buttons and to close automatically) for updates or errors, without distracting users from their browser experience by displaying obtrusive alerts.

Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+



1. Dialog box types

                    // this example is for the "error" box only
                    // for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
                    new $.Zebra_Dialog(
                        'Use error messages to let the user know that an action has not completed successfully ' +
                        'and show the reason why that happened.',
                        {
                            type: 'error',
                            title: 'Error'
                        }
                    );
                    
The five dialog box types are: error, warning, question, information and confirmation.

2. Custom buttons and the onClose event

                    new $.Zebra_Dialog(
                        'We can set as many buttons as we want and we can handle the user\'s choice though the callback ' +
                        'function attached to the onClose event.

See the next example to handle ' + 'user\'s choice in a different way.' +, { type: 'question', title: 'Custom buttons', buttons: ['Yes', 'No', 'Help'], onClose: function(caption) { // notice that we use the button's label to determine which button was clicked // "caption" will be empty when the dialog box is closed by clicking the dialog // box's close button or by clicking the overlay alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked'); } } );
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
Click here to open.

3. Custom buttons with callback functions

                    new $.Zebra_Dialog(
                        'We can set as many buttons as we want and we can handle the user\'s choice though the callback ' +
                        'functions attached to the buttons.',
                        {
                            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'); }}
                            ]
                        }
                    );
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
Click here to open.

4. Positioning

                    // this example is only for positioning the dialog box in the top-right corner
                    // find out more by opening the examples
                    new $.Zebra_Dialog(
                        'I am positioned in the top-right corner, 20 pixels from the margins. Here\'s ' +
                        'how it\'s done:
position: [\'right - 20\', \'top + 20\']', { title: 'Custom positioning', width: 460, position: ['right - 20', 'top + 20'] } );
Open a dial box in the top-left corner
Open a dial box in the top-right corner
Open a dial box in the bottom-right corner
Open a dial box in the bottom-left corner
Open a dial box in the the center of the screen
Open a dial box in the horizontally centered, 50 pixels from the top edge

5. No title bar

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

6. Use as notification widget

                    new $.Zebra_Dialog(
                        'I am a notification widget. No buttons, no overlay, I am positioned in the top-right corner and ' +
                        'I stay on screen for 2 seconds.',
                        {
                            buttons: false,
                            modal: false,
                            position: ['right - 20', 'top + 20'],
                            auto_close: 2000
                        }
                    );
Click here to open.

7. Content loaded from an element on the page

                    new $.Zebra_Dialog({
                        source: {
                            inline: $('#boxcontent').html()
                        },
                        width: 600,
                        title: 'Content loaded from an element on the page'
                    });
Click here to open.

8. Content loaded via AJAX

                    new $.Zebra_Dialog({
                        source: {
                            ajax: 'ajax.html'
                        },
                        width: 600,
                        title: 'Content loaded via AJAX'
                    });
Click here to open.

9. Content loaded in an iFrame

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

10. Customizing the appearance

Let's make the title bar have a dark-blue background and show a custom icon

The CSS

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

The JavaScript

                    new $.Zebra_Dialog('I love coffee!', {
                        custom_class: 'myclass',
                        title: 'Customizing the appearance',
                        width: 150
                    });
Click here to open.

copyright © 2011 - 2018 stefan gabos