Zebra_Dialog, a lightweight dialog box jQuery plugin

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

Zebra_Dialog is available as an npm package. To install it use:

npm install zebra_dialog

Zebra_Dialog is also available as a Bower package. To install it use:

bower install zebra_dialog

Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.12.0.js"><\/script>')</script>

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

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


Alternatively, you could show your support by starring this library on GitHub

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.



Click on a version to expand/collapse information.

version 1.3.12 (January 26, 2016)
version 1.3.9 (January 21, 2016)
  • added missing preloader.gif file to the “flat” theme; thanks to Juan for reporting;
  • replaced all instances of jQuery with $, for consistency and for making it easier to use with jQuery.noConflict(); thanks to Julio for suggesting;
  • fixes and additions to the bowser.json file, for better integration with Bower
  • examples now use jQuery version 1.12.0
  • dropped support for jQuery’s deprectated official plugins repository
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


394 thoughts on “Zebra_Dialog, a lightweight dialog box jQuery plugin

  1. Christian A ing.Sistemas

    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!


  2. ismail

    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

    1. Stefan Gabos Post author

      I do that on purpose, so it doesn’t has to constantly recompute everything on the fly, but only once, when it is opened. In real life scenarios – even considering orientation change – it is *very* unlikely that these things occur.

  3. Ian

    Thanks for this great plugin.

    Question 1: How do I apply CSS to the actual message within the box? For example, I would like the message to align to the right within the box

    Question 2: Is there a way for me to set the height of the box? There only seems to be an option to set the width in the CSS, and when I try to add “Height: 400px;” it does not do anything.

    Thanks for your time. I have made a Paypal donation.

    1. Stefan Gabos Post author

      you inspect the HTML and see what classes are used and you simply target them and add your CSS

      .ZebraDialog .ZebraDialog_Body {
          text-align: right;
          min-height: 500px;
  4. Paulo


    I love Zebra, but its possible resize Dialog window when browser window resizes? Can do it dinamically, in real time?


  5. Ritu

    Hi author,

    I am planning to use the Zebra_Dialog in one of wordpress plugin and this plugin is a commercial plugin. The Zebra Dialog is used to show to dialogs on a websites of customers who use my plugin. I am going to include your website and license details in my plugin source code.

    I am not going to modify you source code. Can I use this Zebra Dialog in a commercial plugin?


  6. George

    Looking around for a good Javascript dialog component. This seems to be really nice. The only thing missing from my purposes is an input dialog, aka ask the user for one or more inputs. Is this possible, or on the roadmap?

    1. Isuelt

      Same here. I was looking for a small modal to prompt a user for input. For my purposes I would like to have a text input field and a checkmark box.

      If this is possible please email me. For now I’m going to look at other modal plugins.

  7. Larry Wishon

    Hi Stefan,
    I didn’t see this in the documentation, but how would I make a redirect to another page on my site when a user clicks a button? I want to display a message, then when they click an “OK” button, it takes them to a different page.

  8. Erick

    Hi, I’m calling function this way


    but script seems do not stop as with pure javascript alert().
    In my case is a screen keydown or right mouse button verification to avoid user copy my content.

    With javascript alert(), user cannot click again or type ctrl or alt key before close dialog button, but with zebra appears a new instance of dialog and freezes. Script do not stop waiting close dialog.

    Is there any way of calling zebra function that stop script execution while ok button is not clicked?

    Thank you.

    1. Stefan Gabos Post author

      I am moving everything over to GitHub and closing the website. It will take me a couple more weeks

Leave a Reply

Your email address will not be published. Required fields are marked *