Nattily Polished Marbles
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


1.6.0 • Public • Published

Zebra Dialog  Tweet

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

npm Total Monthly License

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 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 dialog boxes.

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.

Screenshot    Screenshot


  • 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 customisable appearance by editing the CSS file
  • create modal or non-modal dialog boxes
  • easily add custom buttons
  • position the dialog box wherever you want - not just in the middle of the screen
  • callback functions can be used for further customisations
  • use callback functions to handle users' choice
  • works in pretty much any browser (Chrome, Firefox, Safari, Edge, Opera, 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


See the demos


Zebra Dialog has no dependencies other than jQuery 1.7.0+


Zebra Dialog is available as a npm package. To install it use:

# the "--save" argument adds the plugin as a dependency in packages.json 
npm install zebra_dialog --save

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

# the "--save" argument adds the plugin as a dependency in bower.json 
bower install zebra_dialog --save

How to use

First, load jQuery from a CDN and provide a fallback to a local source like:

<script src=""></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-3.3.1.js"><\/script>')</script> 

Load the Zebra Dialog jQuery plugin:

<script src="path/to/zebra_dialog.min.js"></script>

Alternatively, you can load Zebra Dialog from JSDelivr CDN like this:

<!-- for the most recent version, not recommended in production -->
<script src=""></script>
<!-- for a specific version -->
<script src=""></script>
<!-- replacing "min" with "src" will serve you the non-compressed version -->

Load the style sheet file from a local source

<link rel="stylesheet" href="path/to/theme/zebra_dialog.min.css">

...or from JSDelivr CDN

<!-- for the most recent version of the "flat" theme -->
<!-- for the most recent version of the "default" theme -->
<!-- replacing "min" with "src" will serve you the non-compressed version -->

Now, within the DOM-ready event do

$(document).ready(function() {
    // show a dialog box when clicking on an element
    $('#element').on('click', function(e) {
        new $.Zebra_Dialog('The link was clicked!');

Configuration options


Property Type Default Description
animation_speed_hide integer 250 The speed, in milliseconds, by which the overlay and the dialog box will be animated when closing.
animation_speed_show integer 0 The speed, in milliseconds, by which the overlay and the dialog box will be animated when appearing.
auto_close mixed FALSE The number of milliseconds after which to automatically close the dialog box or FALSE to not automatically close the dialog box.
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: ['Ok', 'Cancel'] for warning and question and types, and ['Ok'] for the other types of dialog boxes.

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.

You can also add custom CSS classes and/or attach callback functions to individual buttons by providing an array of objects like:

  caption: 'My button 1',
  custom_class: 'foo',
  callback: function() { // code }
  caption: 'My button 2',
  custom_class: 'bar',
  callback: function() { // code }

Callback functions get as argument the entire dialog box jQuery object.

A callback function returning FALSE will prevent the dialog box from closing.
center_buttons boolean FALSE Setting this property to TRUE will instruct the plugin to center any available buttons instead of floating them to the right
custom_class mixed FALSE An extra class to add to the dialog box's container, useful for further customizing dialog boxes

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.

Take a look into a theme's style sheet file to see what can be changed.
keyboard boolean TRUE When set to TRUE, pressing the ESC key will close the dialog box.
max_height integer 0 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.
message string The message in the dialog box - this is passed as argument when the plugin is called.
modal boolean TRUE When set to TRUE there will be a semitransparent overlay behind the dialog box, preventing users from clicking the page's content.
overlay_close boolean TRUE Should the dialog box close when the overlay is clicked?
overlay_opacity double .9 The opacity of the overlay (between 0 and 1)
position mixed ['center', 'middle'] Position of the dialog box.

Can be either center or an array with 2 elements, in the form of

// notice that everything is enclosed in quotes
['horizontal_position +/- offset',
'vertical_position +/- offset']

  • horizontal_position can be left, right or center
  • vertical_position can be top, bottom or middle
  • offset is optional and represents the value of pixels to add/subtract from the respective horizontal or vertical position
Positions are relative to the viewport
// position the dialog box in the top-left corner
// shifted 20 pixels inside
['left + 20', 'top + 20']

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

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

reposition_speed integer 100 The duration (in milliseconds) of the animation used to reposition the dialog box when the browser window is resized.
show_close_button boolean TRUE 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.
source mixed FALSE 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 here), 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: ''}

    source: {
      ajax: {
        url: '',
        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 are valid attributes of the iframe tag, or it can be a string representing a valid URL to be loaded inside an iFrame and placed inside the dialog box.

    source: {iframe: ''}

    source: {
      iframe: {
        src: '',
        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')}
title string ""
(empty string, no title)
Title of the dialog box
type mixed information 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, the warning and question types have two buttons with the captions Ok and Cancel respectively, while the other types have a single button with the caption Ok.
vcenter_short_message boolean TRUE Should short messages be vertically centered?
width integer 0
(uses the value defined in the theme)
Width of the dialog box

By default, the width of the dialog box is set in the theme 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 theme file. Value should be no less than 200 for optimal output.


Event Description
onClose Event fired when after the dialog box is closed.
For executing functions before the closing of the dialog box, see the buttons option.
The callback function takes as argument the caption of the clicked button, or FALSE if the dialog box was closed by pressing the ESC key or by clicking on the overlay.



Call this method to manually close a dialog box.

var dialog = new $.Zebra_Dialog('This is some information');

Support the development of this project



Cross browser/device testing is done with



npm i zebra_dialog

Downloadsweekly downloads









last publish


  • avatar