Click here to see the "flat" theme
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.
Note that the onClose event is executed *after* the dialog box is closed! see the next example for executing functions *before* the closing of the dialog box
$.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'); } });
3.1 Custom buttons with attached callback functions. Click here to open.
Note that the callback functions attached to custom buttons are executed *before* the dialog box is closed and as soon as a button is clicked! see the previous example for executing functions *after* the closing of the dialog box
$.Zebra_Dialog('<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery', { type: 'question', title: 'Custom buttons', buttons: [ {caption: 'Yes', callback: function() { alert('"Yes" was clicked'); }}, {caption: 'No', callback: function() { alert('"No" was clicked'); }}, {caption: 'Cancel', callback: function() { alert('"Cancel" 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. Content loaded from an inline souce. Click here to open.
new $.Zebra_Dialog({ source: {inline: $('#boxcontent').html()}, width: 600, title: 'Inline content' });
7 External content loaded via AJAX. Click here to open.
new $.Zebra_Dialog({ source: {ajax: 'ajax.html'}, width: 600, title: 'External content loaded via AJAX' });
7.1 External content loaded in an iFrame. Click here to open.
new $.Zebra_Dialog({ source: {iframe: { src: 'http://en.m.wikipedia.org/wiki/Dialog_box', height: 500 }}, width: 800, title: 'External content loaded in an iFrame' });
8. Customizing the appearance - make the title bar have a dark-blue background and show a custom icon!
The CSS is
/* Notice how we're targting the dialog box's title bar through the custom class */ .myclass .ZebraDialog_Title { background: #330066; } .myclass .ZebraDialog_Body { background-image: url('coffee_48.png'); }
Click here to open.
new $.Zebra_Dialog('Buy me a coffee if you like this plugin!', { custom_class: 'myclass', title: 'Customizing the appearance' });