Powerful jQuery Dialog Box Plugin - Zebra_Dialog

Powerful jQuery Dialog Box Plugin - Zebra_Dialog
File Size: 99.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Zebra_Dialog is a small (4KB minified), compact (one JS file, no dependencies other than jQuery 1.5.2+) and highly configurable dialog box plugin for jQuery.   It also can be used as a notification widget for your website or project.

Zebra_Dialog can generate 5 types of dialog boxes: confirmation, information, warning, error and question. The appearance of the dialog boxes is easily customizable by changing the CSS file.

Zebra_Dialog dialog boxes can be positioned anywhere on the screen - not just in the middle! By default, dialog boxes can be closed by pressing the ESC key or by clicking anywhere on the overlay. It also can be used as a notification widget for your website or project.

You might also like:

Basic Usage:

1.  Include jQuery library and jQuery Zebra_Dialog on your web page

<script src="jquery.min.js"></script>
<script src="javascript/zebra_dialog.js"></script> 

2. Include jQuery Zebra_Dialog to style your plugin

<link rel="stylesheet" href="css/zebra_dialog.css" type="text/css">

3. The Html

<a href="javascript:void(0)" id="example1">here</a>

4. Call the plugin

// show a dialog box when clicking on a link
$('#example1').bind('click', function(e) {
  e.preventDefault();
  $.Zebra_Dialog('The link was clicked!');
});

5. Possible plugin options with default values.

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

//  The speed, in milliseconds, by which the dialog box will
//  fade in when appearing.
animation_speed_show:       0,              

//  The number of milliseconds after which to automatically
//  close the dialog box or FALSE to not automatically close the dialog box.
auto_close:                 false,          

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

//  When set to TRUE, the buttons will be centered instead of
//  right-aligned.                                          
buttons:                    true,           

center_buttons:              false,         

//  An extra class to add to the dialog box's container. Useful
//  for customizing a dialog box elements' styles at runtime.
//
//  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.
custom_class:                false,         

//  When set to TRUE, pressing the ESC key will close the dialog
//  box.
keyboard:                   true,           

//  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.
max_height:                 0,              

//  The text (or HTML) to be displayed in the dialog box.
//
//  See the "source" property on how to add content via AJAX,
//  iFrames or from inline elements.
message:                    '',             

//  When set to TRUE there will be a semitransparent overlay
//  behind the dialog box, preventing users from clicking
//  the page's content.
modal:                      true,           

//  Should the dialog box close when the overlay is clicked?
overlay_close:              true,           

//  The opacity of the overlay (between 0 and 1)
overlay_opacity:            '.9',           
//

//  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.
position:                   'center',       

//  The duration (in milliseconds) of the animation used to
//  reposition the dialog box when the browser window is resized.
reposition_speed:           500,            

//  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.
show_close_button:          true,           

//  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')}
source:                     false,          

//  Title of the dialog box
title:                      '',             

//  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.
type:                       'information',  

//  Should short messages be vertically centered?
vcenter_short_message:      true,           

//  By default, the width of the dialog box is set in the CSS
//  file. Use this property to override the default width at
//  runtime.
//
//  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.
width:                      0,              

//  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.
onClose:                null                

Change Log:

v1.4.1 (2017-10-14)

  • fixed bug where dialog box height could exceed viewport height
  • fixed scrolling on iPhone

v1.4.0 (2016-06-28)

  • performance improvements and source code tweaks
  • new folder structure
  • The dialog boxes have now 100% width on small screens. 

v1.3.12 (2016-06-01)

  • Fixed issues with positioning of the "close" button

v1.3.8 (2013-12-21)

  • Fixed a bug

v1.3.7 (2013-11-26)

  • Added new "flat" theme

v1.3.6 (2013-10-17)

  • Fixed reference
  • Fixed 2 bugs

v1.3.3 (2013-05-29)

  • 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;

v1.3.2 (2013-05-27)

  • 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;

v1.3.1 (2013-05-07)

  • Fixed a bug with "box-sizing" set to "border-box"

This awesome jQuery plugin is developed by stefangabos. For more Advanced Usages, please check the demo page or visit the official website.