Simple and minimalistic modal plugin for jQuery
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
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>
Click on the respective header to try it out!
new Douzo('Here goes your content!');
Autocloses after 2.5 seconds.
Douzo.notify('This is a notification!', null, {title: 'Notification'});
Includes button and alert icon.
Douzo.alert('This is an alert form!');
Includes confirm and cancel button.
Douzo.confirm('This is a confirmation form!');
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 call with parameter options.
Douzo.ajax('ajax.php', {params: {name: 'test'}});
Image display with optional width/height arguments.
Douzo.img('street.jpg', {title: 'An Image', width: '300'});
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);
}
});
A small overview of available options.
width
'auto'
: custom widthheight
'auto'
: custom heightviewport
{top: '0px', left: '0px'}
: viewport positionbuttons
[]
: array of json structured buttonscenter
true
: center dialogtitle
null
: title headingtitleClass
null
: custom title classposition
fixed
: dialog position (choose between fixed and absolute)modal
true
: activate or disable overlaymodalOpacity
0.5
: overlay opacitymodalClick
false
: overlay click behaviourpadding
15px 10px 5px
: content paddingunload
true
: unload the dialog from DOMautoclose
null
: autoclose after x millisecondscallback
null
: custom callback functionjQuery version 1.7+ and Font Awesome (currently included)