a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes
See the examples with the dialog boxes using the flat or the materialize theme.
Zebra Dialog is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript alert and confirmation dialogs.
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.
Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+
// this example is for the "error" box only // for the other types the "type" property changes to "warning", "question", "information" and "confirmation" new $.Zebra_Dialog( 'Use error messages to let the user know that an action has not completed successfully ' + 'and show the reason why that happened.', { type: 'error', title: 'Error' } );
onClose
eventnew $.Zebra_Dialog( 'We can set as many buttons as we want and we can handle the user\'s choice though the callback ' + 'function attached to the onClose event.
See the next example to handle ' + 'user\'s choice in a different way.' +, { type: 'question', title: 'Custom buttons', buttons: ['Yes', 'No', 'Help'], onClose: function(caption) { // notice that we use the button's label to determine which button was clicked // "caption" will be empty when the dialog box is closed by clicking the dialog // box's close button or by clicking the overlay alert((caption != '' ? '"' + caption + '"' : 'nothing') + ' was clicked'); } } );
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
new $.Zebra_Dialog( 'We can set as many buttons as we want and we can handle the user\'s choice though the callback ' + 'functions attached to the buttons.', { 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'); }} ] } );
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
// this example is only for positioning the dialog box in the top-right corner // find out more by opening the examples new $.Zebra_Dialog( 'I am positioned in the top-right corner, 20 pixels from the margins. Here\'s ' + 'how it\'s done:position: [\'right - 20\', \'top + 20\']
', { title: 'Custom positioning', width: 460, position: ['right - 20', 'top + 20'] } );
new $.Zebra_Dialog( '<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery' );
new $.Zebra_Dialog( 'I am a notification widget. No buttons, no overlay, I am positioned in the top-right corner and ' + 'I stay on screen for 2 seconds.', { buttons: false, modal: false, position: ['right - 20', 'top + 20'], auto_close: 2000 } );
new $.Zebra_Dialog({ source: { inline: $('#boxcontent').html() }, width: 600, title: 'Content loaded from an element on the page' });
new $.Zebra_Dialog({ source: { ajax: 'ajax.html' }, width: 600, title: 'Content loaded via AJAX' });
new $.Zebra_Dialog({ source: { iframe: { src: 'https://en.m.wikipedia.org/wiki/Dialog_box', height: 500 } }, width: 800, title: 'External content loaded in an iFrame' });
Let's make the title bar have a dark-blue background and show a custom icon
The CSS
/* Notice how we're targeting the dialog box's title bar through the custom class */ .myclass .ZebraDialog_Title { background: #330066; } .myclass .ZebraDialog_Body { background-image: url('coffee_48.png'); font-size: 21px; }
The JavaScript
new $.Zebra_Dialog('I love coffee!', { custom_class: 'myclass', title: 'Customizing the appearance', width: 150 });
copyright © 2011-2018 stefan gabos