douzo.js

douzo.js is a lightweight and beautiful jQuery modal plugin dedicated to show content in a simple way. It provides various options ranging from prompt, alert to confirm-forms and also includes ajax/media capabilities.

$ git@github.com:gimu/douzo.js.git

Usage

Extract the respective files (douzo.min.js and douzo.min.css for a minified version) and refer to them.

<link rel="stylesheet" href="path/to/douzo.min.css">
<script src="path/to/douzo.min.js"></script>

Calls

Click on the respective header to try it out!

Basic Call

new Douzo('Here goes your content!');

Notification Extension

Autocloses after 2.5 seconds.

Douzo.notify('This is a notification!', null, {title: 'Notification'});

Alert Extension

Includes button and alert icon.

Douzo.alert('This is an alert form!');

Confirm Extension

Includes confirm and cancel button.

Douzo.confirm('This is a confirmation form!');

Prompt Extension

Includes input field, submit and cancel button.
Callback example in the following code.

Douzo.prompt('Here goes your content.', function(val, str) {alert('Button: ' + val + '\nInput: ' + str)}, {title:'custom title'});

Ajax Extension

Ajax call with parameter options.

Douzo.ajax('ajax.php', {params: {name: 'test'}});

Image Extension

Image display with optional width/height arguments.

Douzo.img('street.jpg', {title: 'An Image', width: '300'});

Custom Settings

Custom buttons and callback example.

new Douzo('custom content', {title: 'custom title', buttons: [
    {label: 'Yes', val: 'yes', classname: 'douzo-success'},
    {label: 'No', val: 'no', classname: 'douzo-danger'},
    {label: 'Cancel', val: 'cancel', classname: 'douzo-default'}], callback: function(val) {
        alert(val);
    }
});

Options

A small overview of available options.

• width 'auto': custom width
• height 'auto': custom height
• viewport {top: '0px', left: '0px'}: viewport position
• buttons []: array of json structured buttons
• center true: center dialog
• title null: title heading
• titleClass null: custom title class
• position fixed: dialog position (choose between fixed and absolute)
• modal true: activate or disable overlay
• modalOpacity 0.5: overlay opacity
• modalClick false: overlay click behaviour
• padding 15px 10px 5px: content padding
• unload true: unload the dialog from DOM
• autoclose null: autoclose after x milliseconds
• callback null: custom callback function

Requirements

jQuery version 1.7+ and Font Awesome (currently included)