Skip to content

A small, compact, and highly configurable jQuery plugin for creating modal dialog boxes, meant to replace native Java Script “alert” and “confirmation” dialog boxes.

License

Notifications You must be signed in to change notification settings

doufum/Zebra_Dialog

 
 

Repository files navigation

##Zebra_Dialog

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

Zebra_Dialog is a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes, meant to replace native Java Script “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

##Features

  • great looks - out of the box, and 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 stylesheet
  • create modal or non-modal dialog boxes - callback functions can be used for further customisations
  • 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+)

##Requirements

Zebra_Dialog has no dependencies other than jQuery 1.4.1+

##How to use

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

<script src="ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.10.2.js"><\/script>')</script>

Load the Zebra_Dialog plugin

<script type="text/javascript" src="path/to/zebra_dialog.js"></script>

Load one of the plugin’s themes

<link rel="stylesheet" href="path/to/themes/default/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!');
    });

});

Configuration options and demos on the project's homepage

About

A small, compact, and highly configurable jQuery plugin for creating modal dialog boxes, meant to replace native Java Script “alert” and “confirmation” dialog boxes.

Resources

License

Stars

Watchers

Forks

Packages

No packages published