##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.
##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
Zebra_Dialog is available as a Bower package. To install it use:
bower install zebra_dialog
Zebra_Dialog is also available as a npm package. To install it use:
npm install zebra_dialog
Load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.12.0.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