Zebra_Dialog, a lightweight dialog box jQuery plugin

Get the latest updates on this jQuery plugin via RSS

A small, compact and highly configurable dialog box plugin for jQuery

A modal window is a child window that requires users to interact with it before they can continue using the parent application. Modal windows are one of the most commonly used user interface elements, and are used to command user awareness in order to communicate important information, or to alert of errors or warnings.

Zebra_Dialog is a small, compact (one Java Script file, no dependencies other than jQuery 1.4.1+) and highly configurable jQuery plugin for creating modal dialog boxes, meant to replace native Java Script “alert” and “confirmation” dialog boxes, and built using the jQuery Plugin Boilerplate.

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.

Features:

  • great looking dialog boxes, out of the box: CSS3, drop-shadows, rounded corners
  • 5 types of dialog boxes available: confirmation, information, warning, error and question
  • content can also be added through AJAX calls, iFrames, or from inline elements (together with attached events)
  • easily customizable appearance by editing the CSS (cascading style sheet) file
  • create modal dialog boxes or non-modal dialog boxes
  • easily add custom buttons
  • position the dialog box wherever you want – not just in the middle of the screen
  • use callback functions to handle user’s choice
  • works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)

Icons for confirmation, information, error and question dialog boxes are made by DryIcon while the warning icon is made by Function Design & Development Studio.

Top

Requirements

Zebra_Dialog has no dependencies other than jQuery 1.4.1+

Top

How to use

First, load the latest version of jQuery either from a local source or from a CDN.

Load the Zebra_Dialog plugin

<script type="text/javascript" src="path/to/zebra_dialog.js"></script>

Load the plugin’s CSS file

<link rel="stylesheet" href="path/to/zebra_dialog.css" type="text/css">

Now, within the DOM-ready event do

$(document).ready(function() {

    // show a dialog box when clicking on a link
    $(anchor).bind('click', function(e) {
        e.preventDefault();
        $.Zebra_Dialog('The link was clicked!');
    });

 });

Demos

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. External content loaded via AJAX.
Click here to open.

new $.Zebra_Dialog('<strong>Some dummy content:</strong><br><br>', {
    'source':  {'ajax': 'ajax.html'},
    width: 600,
    'title': 'External content loaded via AJAX'
});

 

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

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

 

7. Customizing the appearance – make the title bar have a dark-blue background

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.

$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly' +
    'configurable dialog box plugin for jQuery', {
    'custom_class':  'myclass',
    'title': 'Customizing the appearance'
});

Top

Configuration

All parameters are optional.

animation_speed integer

The speed, in milliseconds, by which the overlay and the dialog box will be animated when closing. 

Default is 250
auto_close mixed

The number of milliseconds after which to automatically close the dialog box or FALSE to not automatically close the dialog box. 

Default is FALSE.
buttons mixed

Use this for localization and for adding custom buttons. 

If set to TRUE, the default buttons will be used, depending on the type of the dialog box: ['Yes', 'No'] for “question” type and ['Ok'] for the other dialog box types.

For custom buttons, use an array containing the captions of the buttons to display: ['My button 1', 'My button 2'].

Set to FALSE if you want no buttons.

Note that when the dialog box is closed as a result of clicking a button, the “onClose” event is triggered and the callback function (if any) receives as argument the caption of the clicked button.

See the comments for the “onClose” event below for more information.

You can also attach callback functions to individual buttons by using objects in the form of:
[
{caption: 'My button 1', callback: function() { // code }},
{caption: 'My button 2', callback: function() { // code }}
]

The main difference is that a callback function attached this way is executed as soon as the button is clicked rather than *after* the dialog box is closed, as it is the case with the “onClose” event.

Callback functions attached to buttons get as argument the entire dialog box jQuery object.
custom_class mixed

An extra class to add to the dialog box’s container. 

Useful for customizing a dialog box elements’ styles at run-time.

For example, setting this value to “mycustom” and in the CSS file having something like .mycustom .ZebraDialog_Title { background: red } would set the dialog box title’s background to red.

See the CSS file for what can be changed.

Default is FALSE
keyboard boolean

When set to TRUE, pressing the ESC key will close the dialog box. 

Default is TRUE.
max_height integer

The maximum height, in pixels, before the content in the dialog box is scrolled.

If set to “0″ the dialog box’s height will automatically adjust to fit the entire content.

Default is “0″.
message string

The message in the dialog box – this is passed as argument when the plugin is called. 
modal boolean

When set to TRUE there will be a semitransparent overlay behind the dialog box, preventing users from clicking the page’s content. 

Default is TRUE.
overlay_close boolean

Should the dialog box close when the overlay is clicked? 

Default is TRUE.
overlay_opacity double

The opacity of the overlay (between 0 and 1) 

Default is .9
position mixed

Position of the dialog box. 

Can be either “center” (which would center the dialog box) or an array with 2 elements, in the form of ['horizontal_position +/- offset', 'vertical_position +/- offset'] (notice how everything is enclosed in quotes) where “horizontal_position” can be “left”, “right” or “center”, “vertical_position” can be “top”, “bottom” or “middle”, and “offset” represents an optional number of pixels to add/substract from the respective horizontal or vertical position.

Positions are relative to the viewport (the area of the browser that is visible to the user)!

Examples:

['left + 20', 'top + 20'] would position the dialog box in the top-left corner, shifted 20 pixels inside.

['right - 20', 'bottom - 20'] would position the dialog box in the bottom-right corner, shifted 20 pixels inside.

['center', 'top + 20'] would position the dialog box in center-top, shifted 20 pixels down.

Default is ['center', 'middle']
reposition_speed integer

The duration (in milliseconds) of the animation used to reposition the dialog box when the browser window is resized. 

Default is 100.
source mixed

Add content via AJAX, iFrames or from inline elements (together with the already applied events). 

This property can be any of the following:

- ‘ajax’: object – where “object” can be an object with any of the properties you’d normally use to make an AJAX call in jQuery (see the description for the “settings” argument at http://api.jquery.com/jQuery.ajax/), or it can be a string representing a valid URL whose content to be fetched via AJAX and placed inside the dialog box.

Example:

source: {‘ajax’: ‘http://myurl.com/’}

source: {‘ajax’: {
‘url’: ‘http://myurl.com/’,
‘cache’: false
}}

Note that you cannot use the “success” property as it will always be overwritten by the library; use the “complete” property instead, if you have to!

- ‘iframe’: object – where “object” can be an object where property names can be valid attributes of the <iframe> tag (see https://developer.mozilla.org/en-US/docs/HTML/Element/iframe), or it can be a string representing a valid URL to be loaded inside an iFrame and placed inside the dialog box.

Example:

source: {‘iframe’: ‘http://myurl.com/’}

source: {‘iframe’: {
‘src’: ‘http://myurl.com/’,
‘width’: 480,
‘height’: 320,
‘scrolling’: ‘no’
}}

Note that you should always set the iFrame’s width and height and adjust the dialog box’s “width” property accordingly!

- ‘inline’: selector – where “element” is a jQuery element from the page; the element will be copied and placed inside the dialog box together with any attached events! if you just want the element’s inner HTML, use $(‘#element’).html().

Example:

source: {‘inline’: $(‘#myelement’)}

Default is FALSE
title string

Title of the dialog box 

Default is “” (an empty string – no title)
type mixed

Dialog box type. 

Can be any of the following:

- confirmation
- error
- information
- question
- warning

If you don’t want an icon, set the “type” property to FALSE.

By default, all types except “question” have a single button with the caption “Ok”; type “question” has two buttons, with the captions “Ok” and “Cancel” respectively.

Default is “information”.
vcenter_short_message boolean

Should short messages be vertically centered? 

Default is TRUE.
width integer

Width of the dialog box 

By default, the width of the dialog box is set in the CSS file. Use this property to override the default width at run-time.

Must be an integer, greater than 0. Anything else will instruct the script to use the default value, as set in the CSS file. Value should be no less than 200 for optimal output.

Default is 0 – use the value from the CSS file.

Events
onClose  

Event fired when *after* the dialog box is closed. 

For executing functions *before* the closing of the dialog box, see the “buttons” attribute.

The callback function (if any) receives as argument the caption of the clicked button or boolean FALSE if the dialog box is closed by pressing the ESC key or by clicking on the overlay.

Public methods
close  

Call this method to manually close the dialog box. 

Top 

Download

version 1.3.1
If you find this library to be useful to you, you can support the author by donating a small amount via PayPal:

Zebra_Dialog is distributed under the LGPL.

In plain English, this means that you have the right to view and to modify the source code of this software, but if you modify and distribute it, you are required to license your copy under a LGPL-compatible license, and to make the entire source code of your derivation available to anybody you distribute the software to.

You also have the right to use this software together with software thas has different licensing terms (including, but not limited to, commercial and closed-source software), and distribute the combined software, as long as state that your software contains portions licensed under the LGPL license, and provide information about where the LGPL licensed software can be downloaded.

If you distribute copies of this software you may not change the copyright or license of this software.


You may also like:

Top

Changelog

Click on a version to expand/collapse information.

version 1.3.1 (May 06, 2013)
version 1.3 (April 08, 2013)
  • external content can now easily be loaded into the dialog box via AJAX, or using an iFrame, or an inline element, by using the newly added “source” property; when passing an inline element, it will be copied together with any attached events – useful for passing, for example, a complete form with attached events; thanks to tom;
  • the dialog box will use an animation when repositioning due to a browser window resize; the animation’s speed is set by the newly added “reposition_speed” property;
  • the plugin is now available on GitHub!
version 1.2.2 (February 09, 2013)
  • added a new “max_height” property; when setting it to something to other than “0″, the content in the dialog box will be scrolled if it’s height exceeds the given value;
  • new layout;
version 1.2.1 (January 28, 2013)
  • fixed an issue due to which the plugin was not working with jQuery 1.9.0;
version 1.2 (April 07, 2012)
  • when used as a notification widget, the notification can now be closed before the timer runs out by clicking on it; thanks to Ovidiu Mihalcea for suggesting;
  • callback functions can now be attached to custom buttons; credit goes to Matt!
  • added an example on how to add custom icons
version 1.1.1 (September 24, 2011)
  • fixed a bug where the script would sometimes “forget” to clear the semi-transparent overlay; thanks to Jack Everson for reporting;
version 1.1 (August 18, 2011)
  • the last button of the dialog box will now have the focus once the dialog box is open. previously, for any dialog boxes other than notifications, if the user pressed the ENTER key, it re-triggered the event and more dialog boxes were shown one on top of the other; thanks to Yasir for reporting;
  • it is now possible to add a custom class to the dialog box; this makes it easy to switch between styles at run-time; thanks to Ed for suggesting;
  • fixed a bug where the message’s text color was inherited; now it is set from the CSS file;
  • examples are now also available in the downloadable package;
version 1.0 (June 25, 2011)
  • initial release

Top

210 responses to “Zebra_Dialog, a lightweight dialog box jQuery plugin”

Follow the comments via RSS
  • bach, 2011-11-22, 15:16

    I like the plugin. If I can do the following, it would be great. You allow html string for example:
    ‘A’

    This renders just fine. But there is no way to read the selected item. It may be that the element has not been inserted into the DOM. Can I insert into the DOM and maybe even have an event for that?

    Reply
  • bach, 2011-11-25, 13:26

    I made a slight change in the library to allow the handling of html string. This changed file was minified. This is intended for my own project use (not intended to be used by other). Is it ok? Let me know.

    Thanks,

    Reply
    • Stefan Gabos, 2011-11-25, 21:51

      Sure

  • lemta2000, 2011-11-27, 17:18

    Hello,
    I have a problem with zebra dialog (maybe a bug) that is when call dialog twice times it will hang-on. Please check this.

    Reply
    • Stefan Gabos, 2011-11-27, 20:40

      can you show me the code you’re using?

  • lemta2000, 2011-11-28, 06:59

    Hello,
    I use this code then call it twice times:

    $.Zebra_Dialog(msg, {
    'type':  type,
    'title': title,
    'modal': false
});

    I only able to close dialog at first time and second instance of dialog still on top (unable close it)

    Reply
    • Stefan Gabos, 2011-11-28, 07:51

      use the “new” keyword

      new $.Zebra_Dialog(msg, {
    'type':  type,
    'title': title,
    'modal': false
});
  • lemta2000, 2011-11-29, 03:39

    Hi,
    Ok, also can I have moveabe dialog? somtime when alert shown I want move it to see content dialog below.

    Reply
    • Stefan Gabos, 2011-11-29, 04:45

      Not right now, but this feature is planned for the next version

  • Luke, 2011-11-29, 15:17

    This plugin is great/ I’ve been looking though many overlays and windows and stumbled across this.

    I usually don’t rate or comment about much, But man, Keep up the good work; If the jQuery website would let me rate it atm, I would.

    Cheers

    Reply
  • Field Office, 2011-12-04, 15:24

    Hi
    Any idea how to prevent the issue of focus leaving the modal dialog when using the tab key in some browsers (including IE and Chrome). For example when used from a form, I’m still able to tab between fields in the main window.
    Regards

    Reply
    • Stefan Gabos, 2011-12-04, 16:11

      Currently I haven’t come up with a viable solution on how to implement this. suggestions are welcome

    • Field Office, 2011-12-04, 17:57

      Hi

      They had a similar issue with jQuery UI which has now been resolved. See: http://bugs.jqueryui.com/ticket/5896
      Regards

    • Stefan Gabos, 2011-12-04, 18:08

      It seems like they chose not to handle tab key at all…i want users to be able to cycle through elements but be restricted to the dialog box…

  • bach, 2011-12-05, 15:01

    Hi,

    Regarding to making change to the source code, can you comment on your requirements so that we can stay compliance?

    Thanks,

    Reply
    • Stefan Gabos, 2011-12-05, 16:08

      you are free to change the source code. if you feel like, you can send me an email with things you’ve changed and, if it benefits the community, I’ll add the changes to a future version. thanks!

  • Alex, 2011-12-24, 10:08

    I’d really like to see the notifications being able to stack. Thanks.

    Reply
  • Bob, 2011-12-27, 21:28

    Zebra-dialog works perfectly for me in Firefox and Chrome but when I do a modal box in IE8 the box appears centered in the vieport but below the overlay. Here’s my code:

    var title =”title”;
    var body = “modal zebra-dialog box”;
    $.Zebra_Dialog({
    ‘title’:title,
    ‘message’:body,
    ‘modal’:true
    });

    Reply
    • Stefan Gabos, 2011-12-28, 07:00

      i tried that code and it works fine. you probably have some z-index related CSS properties somewhere that overwrite the z-index property of Zebra_Dialog’s overlayer.

    • Bob, 2011-12-28, 21:48

      Hi Stefan,
      Thanks for getting back to me. Unfortunately, no matter what I try, in IE8 the dialog box appears at the bottom of the overlay. Again it works perfectly in both Firefox and Chrome. I’ve even isolated the code from my website and ran it independantly of any other css and javascript so I don’t think it’s a problem with the z-index. Interestingly, I took your entire webpage, changed example 3 to be modal and it ran fine in IE8. But when I isolate the code, same problem. I’m obviously missing something. Any ideas? Here’s my version of example 3:

      $(document).ready(function() {
    $('#btnteststefan').click(function(e) {
        $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and' +
            'highly configurable dialog box plugin for jQuery', {
            'type':     'question',
            'modal':     'true',
            'title':    'Custom buttons',
            'buttons':  ['Yes', 'No', 'Help'],
            'onClose':  function(caption) {
                alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
            }
        });
    });
});
    • Stefan Gabos, 2011-12-29, 07:48

      it must be something wrong with your CSS. remove all the CSS from your page and see how it fares. If that fixes it, then put CSS properties back one by one (or in blocks) until you isolate the problem. If you find out that indeed the CSS is not the issue, then remove other JavaScript plugins one by one until you isolate the cause of the problem.

  • Bob, 2011-12-29, 17:27

    Got it! Turns out that IE8 requires a !DOCTYPE declaration for positional CSS to work. The dialog box shows perfectly now. Thanks for a great piece of software.

    Reply
  • Software Developer, 2012-01-27, 16:39

    Thank you, it works great on HTML5 enabled browsers.

    Reply
  • tony, 2012-02-08, 02:07

    How to call the public method “close()” mannually? Would you plesase give a example??

    Reply
  • tony, 2012-02-08, 02:27

    I mean when I call the close() method, the onClose call back method is call, it get dead endless(dead loop) .

    Reply
    • Stefan Gabos, 2012-02-08, 07:31 
      var zd = new $.Zebra_Dialog('Content', {
  onClose: function() {
    // do not call zd.close() here or it will enter
    // in an endless loop
  }
});
// close the dialog box manually
zd.close();
  • Leonel, 2012-02-28, 11:28

    there’s any chance that this plugin replace javascript confirm dialog.
    I mean that the dialog blocks until the user press any buttom
    examle code

    var res confirm('you like to continue?')
if (res){
   alert("Bye bye!")
   window.location = "http://www.google.com/";
}else{
   alert("Thanks for sticking around!")
}

    Reply
    • Leonel, 2012-02-28, 13:20

      I need that because this code is inside another code and that code is use in other program so i need to block until the user press a button

    • Stefan Gabos, 2012-03-02, 06:25 

      $.Zebra_Dialog('Would like you like to continue?', {
    'type':     'question',
    'onClose':  function(caption) {
        if (caption == 'Ok') {
            alert("Bye bye!");
            window.location = "http://www.google.com/";
        } else alert("Thanks for sticking around!");
    }
});

« Older comments
Newer comments »

Leave a Reply

Your email address will not be published
You can use <strong>, <em>, <a>, <img>, <code>
Get a new code
Characters are not case-sensitive