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.

Features:

  • 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

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: #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'
});

Top

Configuration

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

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.

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.

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

Top

Changelog

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

Top

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

Follow the comments via RSS
  • ismail, 2014-03-19, 06:09

    thanks a lot , donate was sent.

    Reply
    • Stefan Gabos, 2014-03-19, 12:04

      thank you!

  • discotizer, 2014-03-20, 18:56

    Sorry, my fault. Loops inside the callback function is working. i had twice a change function involved which messed things up.

    Reply
  • Hexos, 2014-03-22, 09:59

    Hello
    Thank you for your work.

    With zebra_dialog I need to open a php script (s1.php) in an iframe (it’s work).
    s1.php is a form (Zebra_Form).
    After validation, s1.php must close iframe .
    how can i do ?
    Thank you in advance

    Reply
    • Hexos, 2014-03-24, 16:14

      I found how close the iframe witch open with Zebra_Dialog. Obj_IFrame = new $ Zebra_Dialog …
      then in the child (iframe)
      there is :: parent.Obj_IFrame.close ()

      Thanks for your work

  • Hexos, 2014-03-24, 16:11

    Hi
    I found how close the iframe witch open with Zebra_Dialog. Obj_IFrame = new $ Zebra_Dialog …
    then in the child (iframe) ::  parent.Obj_IFrame.close ()
    —————————-
    Here is another question
    How to force the loading js scirpt logo waiting until the iframe is not operational ?
    I wanted to inspire me with your code for the ajax but it does not work
    ————-
    preloader = jQuery (‘div’). attr (‘class’, ‘ZebraDialog_Preloader’). appendTo (canvas);
    ——————-
    Can you help me ?

    Thank you in advance.

    Reply
  • Laurent, 2014-03-27, 13:15

    Hi Stefan,

    When keyboard property set to true, esc key event is still propagated. Would be nice to be able to forbid this especially when the dialog is modal. Best regards and great job.

    Reply
  • VinothJaguva, 2014-04-10, 16:03
    $(document).on('click', #btnsubmit', function () {
      var requestData = {
        invnum: $("#invnum").html(),
        notes: $("#notes").html()
      };
      $.ajax({
        url: '/Process/Notes',
        type: 'POST',
        data: JSON.stringify(requestData),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        beforeSend: function () {
          $(".overlay").show(); /*Show overlay*/
          new $.Zebra_Dialog("", { /*Can use preload image or replace with text*/
            'type': 'information',
            'title': 'Please Wait...',
            'buttons': false,
            'modal': false,
            'auto_close': 2000
          });
        },
        success: function() {
          $(".overlay").hide(); /*Hide overlay on success*/
        }
      });
    });

    If the processing bar is appear the submit is not working. If submit works processing bar does not appear.

    $('your-submit-button').bind('click', function(e) {
      e.preventDefault();
      var $form = $('your-form'),
          $zf = $form.data('Zebra_Form');
      if ($zf.validate()) {
        $.ajax({
          'url': $form.attr('action'),
          'type': $form.attr('method').toLowerCase(),
          'data': $form.serialize(),
          'success': function(data) {
          }
        });
      }
    });

    Check both

    Thanks in Advance

    Reply
    • Stefan Gabos, 2014-05-19, 08:54

      your code seems ok, but here’s how I’d do it:

      $('your-submit-button').bind('click', function(e) {
        e.preventDefault();
        var $form = $('your-form'),
            $zf = $form.data('Zebra_Form');
        if ($zf.validate()) {
      
          // show overlay and Zebra_Dialog
      
          $.ajax({
            'url': $form.attr('action'),
            'type': $form.attr('method').toLowerCase(),
            'data': $form.serialize(),
            'success': function(data) {
      
              // hide overlay and Zebra_Dialog
      
            }
          });
        }
      });
  • jerry, 2014-04-18, 00:31

    When the Dialog opens in the middle of a function, the codes does not stop as in an alert, am I missing something?
    Thanks!

    Reply
    • kozhie, 2014-04-30, 11:33

      jerry, have you solved this problem..? Could u share the solution..?

    • Danilo da Silva, 2014-05-07, 20:47

      Yes, Jerry, I run in this same problem. If the dialog doesn’t stop code even when I use ‘modal’: true, I don’t know how to use it for anything.

    • Danilo da Silva, 2014-05-18, 04:36

      I have done this to workaround this problem:

      var buttonToBeClicked = null;
      function ValidateData(arg) {
      if (buttonToBeClicked != null) {
      buttonToBeClicked = null;
      return true;
      }
      buttonToBeClicked = arg;

      \\ do something here

      $.Zebra_Dialog(‘bla,bla,bla!’, {
      ‘type’: ‘information’,
      ‘title’: ‘SilentIdea’,
      ‘modal’: true,
      ‘onClose’: function () {
      $(‘#’ + buttonToBeClicked.id).trigger(‘click’);
      }
      });
      return false;
      }

  • Richard, 2014-04-20, 21:14

    Love the dialog. Works like a charm, and much better than the standard jQuery dialog. Modal is not working in latest versions of Firefox and Chrome. Haven’t tried IE, but who in their right mind uses that anyway?

    Reply
    • Stefan Gabos, 2014-05-15, 23:53

      what do you mean by “not working”? remember: by modal I mean that you cannot interact with the other elements on the page (because of the over layer) not because it stops execution of JavaScript – only JavaScript’s native “confirmation” and “alert” boxes do that

  • Nirav, 2014-04-29, 15:23

    Hi,

    I am just little bit worried about this Plug in.
    If in future new version of JQuery, This Plugin not supportable then?

    Reply
    • Stefan Gabos, 2014-05-11, 17:34

      don’t worry :)

  • Gary, 2014-05-09, 13:00

    I’d like to see this library hosted on jsdelivr CDN
    http://www.jsdelivr.com
    github.com/jsdelivr/jsdelivr
    Better for the developer to do it initially, but happy to do it for you if you don’t have the time…

    Reply
    • Stefan Gabos, 2014-05-19, 22:24

      I’ll consider that – I wrote it down on my TODO list :) Thanks a lot for suggesting!

  • fancypants, 2014-05-11, 22:40

    Hi! I was just wondering if there is a safe way to close the dialog from another javascript function? I am not sure if $(‘.ZebraDialog’).remove() is safe to use?

    Reply
    • Stefan Gabos, 2014-05-12, 09:38

      No, that’s not the way to do it…But reading into documentation you’d see that using the “close” method is the right way of doing it.
      so, if you’d have

      var dialog = new $.Zebra_Dialog(..);

      you’d use

      dialog.close()
  • Danilo da Silva, 2014-05-18, 04:29

    I have tryed to add multiple \n characters in the message but only one is recognized. Why can’t I add a blank line in the middle of the text?

    Reply
    • Stefan Gabos, 2014-05-18, 23:01

      Because the dialog box’s output is HTML…you use <br>’s for new lines

Leave a Reply

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