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 classic 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, confirmation and prompt 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+

screenshot


1. Dialog box types

                    // this example is for the "error" box only
                    // for the other types the "type" property changes to "confirmation", "information", "prompt", "question" and "warning"

                    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 six dialog box types are: confirmation, error, information, prompt, question and warning

2. Correctly handling user input

Handle input via the onClose event:

                    new $.Zebra_Dialog(
                        "Type something in the input box and then try closing this dialog box by clicking on the overlay, " +
                        "by clicking on the \"x\" button, by pressing the ESC key, or by clicking on the <em>Cancel</em> " +
                        "button.<br><br>You should be able to get the input's value <strong>only</strong> " +
                        "when pressing ENTER while inside the input box, or when clicking the <em>Ok</em> button.",
                        {
                            default_value: "A default value can be set",
                            title: "Prompt",
                            type: "prompt",
                            onClose: function(caption, prompt) {

                                // "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking
                                // on the "x" button, or pressing the ESC key
                                //
                                // additionally, for all the cases above, "caption" will be FALSE.
                                //
                                // "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in
                                // which, because there's no button clicked, the value of "caption" will be boolean TRUE
                                //
                                // "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need
                                // to check if the appropriate button was clicked
                                //
                                // note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button
                                // you are using as the confirmation button

                                if (undefined !== prompt && (caption === true || caption === "Ok"))

                                    new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { auto_close: 2000, buttons: false, modal: false, type: "confirmation" }); else new $.Zebra_Dialog("Input was cancelled", { auto_close: 2000, buttons: false, modal: false, type: "error" }); } } );
Open dialog box.

Handle user input via button callback:

                    new $.Zebra_Dialog(
                        "Type something in the input box and then try closing this dialog box by clicking on the overlay, " +
                        "by clicking on the \"x\" button, by pressing the ESC key, or by clicking on the <em>Cancel</em> " +
                        "button.<br><br>You should be able to get the input's value <strong>only</strong> " +
                        "when pressing ENTER while inside the input box, or when clicking the <em>Ok</em> button.",
                        {
                            title: "Prompt",
                            type: "prompt",
                            buttons: [
                                "Cancel",
                                {
                                    caption: "Ok",

                                    //
                                    // SETTING THIS IS VERY IMPORTANT!
                                    //
                                    // this tells the library which button's callback to trigger when the users presses ENTER while
                                    // inside the input box.
                                    //
                                    // if you do not set this, you will not be able to handle user input for this case; you will have
                                    // to use the "onClose" event - see previous example
                                    default_confirmation: true,

                                    callback: function($dialog, prompt) {
                                        new $.Zebra_Dialog("Input value was:

\"" + prompt + "\"", { auto_close: 2000, buttons: false, modal: false, type: "confirmation" }); } } ] } );
Open dialog box.

3. 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 on how 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 pressing ESC, by clicking the // dialog box's close button, or by clicking the overlay new $.Zebra_Dialog((caption != "" ? "\"" + caption + "\"" : "no") + " button was clicked", { auto_close: 2000, buttons: false, modal: false }); } } );
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.

4. 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.

See the previous example on how to handle user's choice " + "in a different way.", { type: "question", title: "Custom buttons", buttons: [ {caption: "Yes", callback: function() { new $.Zebra_Dialog("\"Yes\" button was clicked", { auto_close: 2000, buttons: false, modal: false }); }}, {caption: "No", callback: function() { new $.Zebra_Dialog("\"No\" button was clicked", { auto_close: 2000, buttons: false, modal: false }); }}, {caption: "Cancel", callback: function() { new $.Zebra_Dialog("\"Cancel\" button was clicked", { auto_close: 2000, buttons: false, modal: false }); }}, ] } );
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.

5. 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']", { position: ["right - 20", "top + 20"], title: "Custom positioning", width: 460 } );
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

6. 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.

7. 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 8 seconds. You can dismiss me earlier than that by clicking on me.",
                        {
                            auto_close: 8000,
                            buttons: false,
                            modal: false,
                            position: ["right - 20", "top + 20"]
                        }
                    );
Click here to open.

8. Content loaded from an element on the page

                    // unless explicitly specified, the height of the dialog box will
                    // be automatically computed to fit the loaded content's height

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

9. Content loaded via AJAX

                    // unless explicitly specified, the height of the dialog box will
                    // be automatically computed to fit the loaded content's height

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

10. Content loaded in an iFrame

                    new $.Zebra_Dialog({
                        type: false,                            // no icon
                        custom_class: "ZebraDialog_iFrame",     // a custom class to remove default paddings
                        source: {
                            // iFrame's width and height are automatically set
                            // to fit the dialog box's width and height
                            iframe: {
                                src: "https://en.m.wikipedia.org/wiki/Dialog_box"
                            }
                        },
                        title: "External content loaded in an iFrame",
                        width: 800,
                        height: 800     // unless explicitly specified, the height of the dialog box will
                                        // be determined by the value of the "max_height" property
                    });
                    
Click here to open.

11. Overlapping dialogs

                    new $.Zebra_Dialog('This is the first dialog box. Try opening another one.', {
                        auto_focus_button: $('body.materialize').length ? false : true,
                        buttons: [
                            'Close',
                            {
                                caption: 'Open another dialog box',
                                callback: function() {

                                    // opens the second dialog box

                                    new $.Zebra_Dialog('This is the second dialog box. Notice that the backdrops are not overlapping. ' +
                                        'Pressing ESC or clicking on the backdrop will close this dialog box but not the first one.', {
                                        auto_focus_button: $('body.materialize').length ? false : true,
                                        buttons: [
                                            'Close',
                                            {
                                                caption: 'Open yet another dialog box',
                                                callback: function() {

                                                    // opens the third dialog box

                                                    new $.Zebra_Dialog('This is the third dialog box. Notice that the backdrops are not overlapping. ' +
                                                        'Pressing ESC or clicking on the backdrop will close this dialog box but not the other ones.', {
                                                        auto_focus_button: $('body.materialize').length ? false : true,
                                                        buttons: [
                                                            'Close',
                                                            {
                                                                caption: 'Open the last dialog box',
                                                                callback: function() {


                                                                    // opens the fourth dialog box

                                                                    new $.Zebra_Dialog('This is the fourth dialog box. Notice that the backdrops are not ' +
                                                                        'overlapping. Pressing ESC or clicking on the backdrop will close this dialog box ' +
                                                                        'but not the other ones.', {
                                                                        auto_focus_button: $('body.materialize').length ? false : true,
                                                                        position: ['left + 20', 'top + 20'],
                                                                        title: 'Fourth dialog box'
                                                                    });

                                                                    // we need to return false or the third dialog box will close
                                                                    return false;

                                                                }
                                                            }
                                                        ],
                                                        position: ['left + 20', 'bottom - 20'],
                                                        title: 'Third dialog box'
                                                    });

                                                    // we need to return false or the second dialog box will close
                                                    return false;

                                                }
                                            }
                                        ],
                                        position: ['right - 20', 'top + 20'],
                                        title: 'Second dialog box'
                                    });

                                    // we need to return false or the first dialog box will close
                                    return false;

                                }
                            }
                        ],
                        title: 'First dialog box'
                    });
Click here to open.

12. 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"
                    });
Click here to open.

copyright © 2011 - stefan gabos