Stefan Gabos web developer extraordinaire

Tweet

Zebra_Dialog, a lightweight dialog box jQuery plugin

Get the latest updates on this jQuery plugin via RSS

• 1. Overview
• 2. Requirements
• 3. How to use
• 4. Configuration
• 5. Download
• 6. Changelog
• 7. Comments

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 (4KB minified), compact (one Java Script file, no dependencies other than jQuery 1.5.2+) 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
• 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.

Requirements

Zebra_Dialog has no dependencies other than jQuery.

I’ve only tested with jQuery 1.5.2 but it may work in earlier versions, too. If you can test, please let me know. Thanks!

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

Configuration

All parameters are optional.

Download

version 1.2 (zip, 99.6Kb)

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

You may also like:

• jQuery Plugin Boilerplate
• Zebra_Accordion, a tiny accordion jQuery plugin
• Zebra_Cookie, an extremely small jQuery plugin for writing, reading and deleting cookies
• Zebra_Datepicker, a lightweight datepicker jQuery plugin
• Zebra_Tooltips, a lightweight tooltips jQuery plugin
• Zebra_TransForm, a tiny jQuery plugin for replacing checkboxes, radio buttons and selects

Changelog

Click on a version to expand/collapse information.

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

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

Follow the comments via RSS

• Matt, 2012-02-29, 21:29

  I added a “draggable” option.

  It’s pretty simple to implement, maybe you can add these lines to the library:

  if (plugin.settings.draggable) {
  plugin.dialog.draggable();
  }

  Additionally, it would be a good idea to change:

  jQuery(”).html(plugin.settings.message).appendTo(plugin.message);

  and

  plugin.message.html(plugin.settings.message);

  and use “.append” instead, so you can use a jQuery object directly.

  Reply
  
  • Matt, 2012-02-29, 21:31

    By the way, it requires jQueryUI, that’s the bad news…
    
• Matt, 2012-02-29, 21:57

  I would be perfect if you add:

  if ($.isPlainObject(value)) {
      button.html(value.text).click(function() {
          value.callback(plugin.message);
      });
  } else {
      button.html(value);
  }

  just after you create the button. It's completely backward compatible and let you add buttons with callbacks in that way:

  buttons: [{
      text: 'button1',
      callback: function(dialog) {
          console.log(dialog);
      }
  },
  'button2']

  Nice library, thank you.

  Reply
  
  • Stefan Gabos, 2012-03-02, 06:46

    matt, that’s a nice idea! I also love the fact that it’s backward compatible
    i’ll consider it for the next version, thanks a lot!
    
• Matt Mason, 2012-03-02, 22:04

  Just added this and was pleased with the ease of use. Thanks!

  Reply
  
• Andreas, 2012-03-03, 20:20

  Hey Stefan,

  in order to increase compatibility, all the jQuery statements inside (function($){})(jQuery) should be replace by the local $ valiable. Right now, if you are running jQuery using a different namespace (and jQuery variable is undefined), i.e. (function($){})(jCustomQuery), the plugin won’t work.

  Reply
  
• Brent, 2012-03-09, 02:37

  Cool plugin!! Just a quick comment though…if you launch two zebra displays, you cannot close both of them with the way the code’s currently written. For example, if I write:

  $.Zebra_Dialog(‘Display 1′);
  $.Zebra_Dialog(‘Display 2′);

  I will only be able to close the one that says Display 2. The user then becomes locked out looking at the window that says Display 1.

  Reply
  
  • Stefan Gabos, 2012-03-09, 18:08

    it has to be

    new $.Zebra_Dialog(‘Display 1′);
    new $.Zebra_Dialog(‘Display 2′);
    
  • Brent, 2012-03-13, 19:32

    Thanks!
    
• Ajai, 2012-04-17, 05:09

  Hey Stefan,
  Its a very nice plugin and very useful.
  How can i make this compatible for IE6,Since overlay modal will not work over select boxes due to z-index issue of IE6

  Regards
  Ajai

  Reply
  
  • Stefan Gabos, 2012-04-17, 05:53

    Thanks, I’ll have a look. You can turn the overlay off until then in IE6
    
  • Ajai, 2012-04-17, 07:35

    Hey Stefan,
    Thanks for your swift reply.
    what i mean by overlay is,the dialog box will not render over select boxes,since z-index of select boxes are always higher in IE6 (known issue).Normally we carry the div in an IFrame, which renders properly over select boxes

    regards
    Ajai
    
• Cole Kuryakin, 2012-04-27, 04:40

  Hi Stefan -

  Very nice plugin – thanks very much.

  Am using the callback function option (I’m VERY new to javascript/jQuery) and – while this works – am I doing this correctly/efficiently?

  Please see below:

  $(‘a.tblBtn’).bind(‘click’, function(e) {
  //Get the name of the link clicked
  var temp = $(this).attr(‘name’).split(‘_’);
  //Get the href value of the link clicked
  var href = $(this).attr(‘href’);
  //Get the guest name in td:0
  var name = $(‘table#tbl_’ + temp[1] + ‘ td:eq(0)’).text();
  //Get the request id number in td:11
  var req = $(‘table#tbl_’ + temp[1] + ‘ td:eq(11)’).text();
  //Vary the dialog title, button and message based upon temp[0]
  if(temp[0] == ‘con’) {
  var type = ‘confirm ‘;
  var btn = ‘Confirm’;
  var title = ‘Confirm Request’;
  } else {
  var type = ‘delete ‘;
  var btn = ‘Delete’;
  var title = ‘Delete Request’;
  }
  //Build the display message
  var msg = ‘Are you sure you want to ‘ + type + name + ‘ (Request ID: ‘ + req + ‘)?’;
  //Does this function prevent page from going anywhere before a button is clicked?
  e.preventDefault();
  //Trigger the dialog
  $.Zebra_Dialog(msg, {
  ‘type’: ‘question’,
  ‘title’: title,
  ‘buttons’: [
  {caption: btn, callback: function() { location.href = href; }},
  {caption: 'Cancel', callback: function() { return false; }}
  ]
  });
  });

  Any feedback on the above greatly appreciated!

  Reply
  
  • Stefan Gabos, 2012-04-28, 19:33

    I’ve only looked strictly at the code related to Zebra_Dialog and yes, that’s how it’s done
    
  • Cole Kuryakin, 2012-05-03, 09:41

    Great Stefan – thanks very much!
    
• Cole Kuryakin, 2012-05-03, 09:47

  Stefan -

  How do you (if your plugin allows it) fire consecutive dialogs?

  For example, the first dialog is a “confirm” type: “are you sure you want to do this?” with Yes or No.

  If the user clicks yes, something happens (ajax function or something). When that function is completed, you want another dialog to fire: “Job completed” with OK.

  If your plugin can do this, can you please let me (all of us) know of a simple syntax example?

  Reply
  
  • Stefan Gabos, 2012-05-03, 10:56

    in the callback for the “yes” button simply call

    new $.Zebra_Dialog(msg, {...})
    
• Marek, 2012-05-04, 09:49

  Hi Stefan,

  Is it possible to use your plugin as a confirmation of sended form? I mean open dialog after submit it by the button?

  Thank You

  Reply
  
• ernesto, 2012-05-04, 16:57

  Any suggestions on how to use the dialog with cookies so we can show an alert only once?

  Thanks in advance for your replies.

  Reply
  

Leave a Reply

Leave this field blank

Name*

Email*

Your email address will not be published

Website

Message*

You can use <strong>, <em>, <a>, <img>, <code>

Enter the characters that stand out in the image above

Characters are not case-sensitive