Zebra_Dialog Demos
1. Default dialog box, no custom settings. Click here to open.$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery');
2. The five dialog box types, with titles: error, warning, question, information and confirmation.
// this example is for the "error" box only
// for the other types the "type" property changes to "warning", "question", "information" and "confirmation"
// and the text for the "title" property also changes
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'error',
'title': 'Error'
});
3. Custom buttons and the callback function. Click here to open.
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'type': 'question',
'title': 'Custom buttons',
'buttons': ['Yes', 'No', 'Help'],
'onClose': function(caption) {
alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked');
}
});
4. Position the dialog box in the top-right corner. Click here to open.
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'title': 'Custom positioning',
'position': ['right - 20', 'top + 20']
});
5. Use as a notification widget - no buttons and close automatically after 2 seconds.
Note how the plugin needs to be instantiated with the "new" keyword or only the last opened box will close!
Click here to open.
new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'buttons': false,
'modal': false,
'position': ['right - 20', 'top + 20'],
'auto_close': 2000
});
6. Customizing the appearance - make the title bar have a dark-blue background
The CSS is
/* Notice how we're targting the dialog box's title bar through the custom class */
.myclass .ZebraDialog_Title { background: #330066 }
Click here to open.new $.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', {
'custom_class': 'myclass',
'title': 'Customizing the appearance'
});