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


  • great looking dialog boxes, out of the box, with 2 themes included
  • 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+)

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

For the “flat” theme, the icons used are made by Elegant Themes



Zebra_Dialog has no dependencies other than jQuery 1.4.1+


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) {
        $.Zebra_Dialog('The link was clicked!');



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: #DEDEDE; border-bottom: 1px solid #222 }
.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'



All parameters are optional.

animation_speed_hide integer

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

Default is 250

animation_speed_show integer

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

Default is 0

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.

A callback function returning FALSE will prevent the dialog box from closing.

center_buttons boolean

Setting this property to TRUE will instruct the plugin to center any available buttons instead of floating them to the right 

Default is FALSE.

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)!


[‘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.

show_close_button boolean

When set to TRUE, a “close” button (the little “x”) will be shown in the upper right corner of the dialog box. If the dialog box has a title bar then the “close” button will be shown in the title bar, vertically centered and respecting the right padding.

If the dialog box does not have a title bar then the “close” button will be shown in the upper right corner of the body of the dialog box, respecting the position related properties set in the stylesheet.

Default is TRUE

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.


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.


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().


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.



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


Call this method to manually close the dialog box. 



version 1.3.8
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 that 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:



Click on a version to expand/collapse information.

version 1.3.8 (December 20, 2013)
  • fixed a bug where setting the “type” attribute to FALSE would not remove the left padding of the dialog box; thanks to Laurent for reporting
  • added “use strict” statement
  • added integration with Grunt
  • the library is now available as a Bower package
version 1.3.7 (November 26, 2013)
  • added a new “flat” theme
version 1.3.6 (October 16, 2013)
  • fixed a bug where custom buttons were showing up in reversed order;
  • fixed a bug where, since the previous release, you’d have to explicitly return TRUE from a callback function attached to a custom button, in order for the dialog box to close;
  • thanks to store88 for spotting both of the above!
version 1.3.5 (September 08, 2013)
  • dialog boxes can now be kept open on button click; previously there was no way of keeping a dialog box from closing when a button was clicked; now, returning FALSE from the callback will do just that;
version 1.3.4 (August 18, 2013)
  • added a new “center_buttons” property which when set to TRUE will instruct the script to center any available buttons instead of floating them to the right;
  • added a new “show_close_button” property which is set to TRUE by default and which displays the little “x” button in the top-right of the dialog box;
  • fixed a few issues in order to keep JSHint (reasonably) happy;
  • slightly increased performance due to optimal management of event handlers;
  • fixed an issue where some things that should’ve been done in CSS were done in JavaScript;
version 1.3.3 (May 29, 2013)
  • The z-index value for the overlay and the dialog box can now be set from CSS. Previously these were set in the JavaScript code and would require hacking the source code in order to change them; thanks Israel Sato
version 1.3.2 (May 26, 2013)
  • fixed a bug where if the “reposition_speed” property was > 0 and the browser window was manually resized, the animations for repositioning the window would queue up and slow down the process to almost a complete halt;
  • changed the name of the “animaton_speed” property to “animation_speed_hide” and added a new “animation_speed_show” used to set the speed by which the dialog box will fade in when appearing;
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


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

Follow the comments via RSS
  • jeguer94, 2014-08-14, 21:51

    I think I’ve found a bug.
    If a Zebra_dialog is shown and then another Zebra_dialog opens up, the first dialog cannot be closed, even after the second dialog is closed. I don’t know how to explain it in English, but here is how to reproduce it:
    Open a Zebra_dialog, then, using a setInterval open another Zebra_dialog, the second works fine, but the fist one cannot be closed.

    • Stefan Gabos, 2014-08-16, 07:51

      use “new $.Zebra_Dialog” instead of just “$.Zebra_Dialog”

  • Art, 2014-08-28, 18:12

    Great plugin, thanks! I do have a question… on a webpage that has content whose length is only 1/2 down the page (that is the bottom half of the page is empty) the overlay only overlays the top half with the gray, the bottom half is still white.

    Any ideas??

  • Lonestar Jack, 2014-09-07, 20:11

    I have a page with several fields and a dropdown box to select a category.
    I have a button to “Add a Category” which I want to call either a popup or dialog to:
    input a new category, and an “Add Record” button which will make an Ajax call to insert into a Mysql table, and a “Close” button.
    What plug-in or module would you suggest I use?

  • laurent, 2014-09-18, 15:57

    any chance to make it draggable ?

    • Stefan Gabos, 2014-09-24, 09:12

      no, currently that is not a priority

  • Phil, 2014-09-25, 09:11

    Hi Stefan.. a gem of a dialog.
    Got it working very well from a click on a span element. However, on second click nothing happens except ‘undefined is not a function (against var zd = line). Do I need to destroy the dialog to reopen it? Or is there a way to test that it is open and reuse it?

    var zd= new $.Zebra_Dialog(”, {
    ‘source': {‘ajax': ‘/calendar?ID=7654′},
    buttons: false,
    modal: true,
    overlay_close: false,
    position: [‘center’,’top + 50′],
    show_close_button: true,
    type: false,
    ‘title': ‘Instant Booking’

    Thanks for your help.

    • Stefan Gabos, 2014-09-25, 09:56

      there’s no “open” method…just delete the “zd.open()” line

    • Phil, 2014-09-25, 10:02

      Thanks Stef… tried deleting zd.open() but still get the same issue Uncaught TypeError: undefined is not a function

    • Stefan Gabos, 2014-09-25, 10:39

      make sure you cleared your cache (or try in incognito window)

    • Phil, 2014-09-25, 12:36

      No go I’m afraid. Tried incognito in Chrome and also cleared the cache.

  • Arun, 2014-09-30, 04:55

    Hi Thanks for plugin,

    I found a issue – When i have a alert box on my page, i cannot click anywhere like other websites or search box at the top. It keep flashing me to click alert box before proceeding further.

    But with this i can do the same. Is there anyway this can work exactly like alert box because its UI/ CSS is really great.


  • Elias Vemeri, 2014-11-10, 18:24

    Hi Stefan,

    I’m trying to superimpose two Zebra dialogs and make them “escable” in reverse order of appearance.

    I’m calling some AJAX content into the first dialog. Then, clicking on a button inside that first dialog triggers a warning, the second dialog. Escape clears both dialogs. The Enter key closes the most recent one but is then disabled in the first one. Escape too.

    Is there a way I can make these dialog boxes react better when there’s one over the other?

    Thank you very much for your answer,


  • Pankaj Agrawal, 2014-11-17, 13:00

    I am using the zebra dialog box in my application. But I am facing a problem that is I am call a ajax request and I want to open the zebra dialog box in response of the ajax (success method of ajax). but I am not able to do that. I am using the bootstrap and coloradmin template.

  • Kaustubh, 2014-11-19, 16:45

    The dialog is awesome. Please make it draggable so that we can keep the height of dialog as auto.

  • Jib, 2014-12-03, 08:51


    Thanks for Super Great and easy to use plug-in. Simple question .. How a change button color from blue to anything else? Can i use image for buttons?

    Thanks Once Again .. :)

    • Stefan Gabos, 2014-12-03, 10:34

      Whatever you want…everything is in the CSS file

  • lucas, 2014-12-11, 21:57

    Hi, Stefan.
    First atl all, great plugin. Now, i would like to send some data and show the result via AJAX. Is there any way to do this ?


  • Donald, 2014-12-19, 12:32

    Hi Stefan.

    i really like this plugin, great work. I have one question though. How can I add a href action to a button?

    Thank you so much

  • Semih MEMIS, 2014-12-21, 16:24

    how can i do that;

    (input type=”button” onclick=”alert(xConfirm());” value=”Confirm”)

    function xConfirm(){

    $.Zebra_Dialog(‘Zebra_Dialog, a small, compact and highly’ +
    ‘configurable dialog box plugin for jQuery’, {
    ‘type': ‘confirmation’,
    ‘title': ‘Title’,
    ‘buttons': [
    {caption: ‘Yes’, callback: function() { return 1;}},
    {caption: ‘No’, callback: function() { return 2;}},
    {caption: ‘Cancel’, callback: function() { return 0;}}


    When i click button, undefined alert shown, and ‘Yes’,’No’,’Cancel’ button nothing to return a value.


  • Christian A ing.Sistemas, 2015-01-15, 03:47

    very good !!! the best library in css and javascript I recomended these codes!! i like very much !! thanks for create great work, congratulation”!!!

    Facil de usar lo recomiendo mucho ya que me fue de gran ayuda para mis trabajos si pueden donar haganlo!


  • ismail, 2015-03-05, 10:08

    I am using the Jquery Zebra DatePicker, I am opening the form in zebra dailog and datepicker into it, but when dialog open, datepicker is opening at the bottom/back of the dialog..?how to solve it? Thanks…. very much


Leave a Reply

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