a small, compact, mobile-friendly and highly configurable jQuery plugin for creating modal dialog boxes
See the examples with the dialog boxes using the materialize or the classic theme.
Zebra Dialog is a small, compact (one JavaScript file, no dependencies other than jQuery 1.7.0+) mobile-friendly and highly configurable jQuery plugin for creating responsive modal dialog boxes, meant to replace native JavaScript alert, confirmation and prompt 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 "confirmation", "information", "prompt", "question" and "warning" 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" } );
Handle input via the onClose
event:
new $.Zebra_Dialog( "Type something in the input box and then try closing this dialog box by clicking on the overlay, " + "by clicking on the \"x\" button, by pressing the ESC key, or by clicking on the <em>Cancel</em> " + "button.<br><br>You should be able to get the input's value <strong>only</strong> " + "when pressing ENTER while inside the input box, or when clicking the <em>Ok</em> button.", { default_value: "A default value can be set", title: "Prompt", type: "prompt", onClose: function(caption, prompt) { // "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking // on the "x" button, or pressing the ESC key // // additionally, for all the cases above, "caption" will be FALSE. // // "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in // which, because there's no button clicked, the value of "caption" will be boolean TRUE // // "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need // to check if the appropriate button was clicked // // note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button // you are using as the confirmation button if (undefined !== prompt && (caption === true || caption === "Ok")) new $.Zebra_Dialog("Input value was:
\"" + prompt + "\"", { auto_close: 1000, buttons: false, modal: false, type: "confirmation" }); else new $.Zebra_Dialog("Input was cancelled", { auto_close: 1000, buttons: false, modal: false, type: "error" }); } } );
Handle user input via button callback:
new $.Zebra_Dialog( "Type something in the input box and then try closing this dialog box by clicking on the overlay, " + "by clicking on the \"x\" button, by pressing the ESC key, or by clicking on the <em>Cancel</em> " + "button.<br><br>You should be able to get the input's value <strong>only</strong> " + "when pressing ENTER while inside the input box, or when clicking the <em>Ok</em> button.", { title: "Prompt", type: "prompt", placeholder: "Type anything here", buttons: [ "Cancel", { caption: "Ok", // // SETTING THIS IS VERY IMPORTANT! // // this tells the library which button's callback to trigger when the users presses ENTER while // inside the input box. // // if you do not set this, you will not be able to handle user input for this case; you will have // to use the "onClose" event - see previous example default_confirmation: true, callback: function($dialog, prompt) { new $.Zebra_Dialog("Input value was:
\"" + prompt + "\"", { auto_close: 1000, buttons: false, modal: false, type: "confirmation" }); } } ] } );
Handle user input validation via the onBeforeClose
callback:
new $.Zebra_Dialog("The input's value will be considered valid only if it contains 6 digits.", { title: "Prompt", type: "prompt", placeholder: "Enter a 6 digit number", onBeforeClose: function(caption, prompt) { // "prompt" will be undefined if the user closes the dialog box by clicking on the overlay, by clicking // on the "x" button, or pressing the ESC key // // additionally, for all the cases above, "caption" will be FALSE. // // "prompt" will contain the input's value if the user presses ENTER while inside the input box - case in // which, because there's no button clicked, the value of "caption" will be boolean TRUE // // "prompt" will also contain the input's value when clicking ANY of the buttons - case in which we need // to check if the appropriate button was clicked // // note that if you have custom buttons you'll have to replace "Ok" with the caption of whatever button // you are using as the confirmation button // if user tries to submit the value if (undefined !== prompt && (caption === true || caption === "Ok")) { // if the input is not valid if (prompt.match(/^[0-9]{6}$/) === null) { // show an error message and don't close the dialog box new $.Zebra_Dialog("You must enter 6 digits", { auto_close: 1000, buttons: false, modal: false, type: "error" }); return false; } // if input was correct, close the dialog box and show the user's input new $.Zebra_Dialog("Input value was:
" + prompt, auto_close: 1000, buttons: false, modal: false, type: "confirmation" ); // if user cancels input by pressing ESC, clicking the "x", clicking the overlay, or the "Cancel" button } else new $.Zebra_Dialog("Input was cancelled", auto_close: 1000, buttons: false, modal: false, type: "information" ); } });
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 on how 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 pressing ESC, by clicking the // dialog box's close button, or by clicking the overlay new $.Zebra_Dialog((caption != "" ? "\"" + caption + "\"" : "no") + " button was clicked", { auto_close: 1000, buttons: false, modal: false }); } } );
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.
See the previous example on how to handle user's choice " + "in a different way.", { type: "question", title: "Custom buttons", buttons: [ {caption: "Yes", callback: function() { new $.Zebra_Dialog("\"Yes\" button was clicked", { auto_close: 1000, buttons: false, modal: false }); }}, {caption: "No", callback: function() { new $.Zebra_Dialog("\"No\" button was clicked", { auto_close: 1000, buttons: false, modal: false }); }}, {caption: "Cancel", callback: function() { new $.Zebra_Dialog("\"Cancel\" button was clicked", { auto_close: 1000, buttons: false, modal: false }); }}, ] } );
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']
", { position: ["right - 20", "top + 20"], title: "Custom positioning", width: 460 } );
Note that in this case the dialog box is not draggable by default - therefore,
we set the draggable
property to force
to make it so!
new $.Zebra_Dialog( "<strong>Zebra_Dialog</strong>, a small, compact, mobile-friendly and highly configurable dialog box plugin for jQuery", { draggable: "force" } );
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 8 seconds. You can dismiss me earlier than that by clicking on me.", { auto_close: 8000, buttons: false, modal: false, position: ["right - 20", "top + 20"] } );
// unless explicitly specified, the height of the dialog box will // be automatically computed to fit the loaded content's height // (use `margin` or `max_height` to handle content that takes up the viewport's height) new $.Zebra_Dialog({ source: { inline: $("#boxcontent").html() }, title: "Content loaded from an element on the page", width: 600 });
// unless explicitly specified, the height of the dialog box will // be automatically computed to fit the loaded content's height // (use `margin` or `max_height` to handle content that takes up the viewport's height) new $.Zebra_Dialog({ source: { ajax: "ajax.html" }, title: "Content loaded via AJAX", width: 600 });
new $.Zebra_Dialog({ type: false, // no icon custom_class: "ZebraDialog_iFrame", // a custom class to remove default paddings source: { // iFrame's width and height are automatically set // to fit the dialog box's width and height iframe: { src: "https://en.m.wikipedia.org/wiki/Dialog_box" } }, title: "External content loaded in an iFrame", width: 800, height: 800 // unless explicitly specified, the height of the dialog box will // be determined by the value of the "max_height" property });
new $.Zebra_Dialog('This is the first dialog box. Try opening another one.', { auto_focus_button: $('body.materialize').length ? false : true, buttons: [ 'Close', { caption: 'Open another dialog box', callback: function() { // opens the second dialog box new $.Zebra_Dialog('This is the second dialog box. Notice that the backdrops are not overlapping. ' + 'Pressing ESC or clicking on the backdrop will close this dialog box but not the first one.', { auto_focus_button: $('body.materialize').length ? false : true, buttons: [ 'Close', { caption: 'Open yet another dialog box', callback: function() { // opens the third dialog box new $.Zebra_Dialog('This is the third dialog box. Notice that the backdrops are not overlapping. ' + 'Pressing ESC or clicking on the backdrop will close this dialog box but not the other ones.', { auto_focus_button: $('body.materialize').length ? false : true, buttons: [ 'Close', { caption: 'Open the last dialog box', callback: function() { // opens the fourth dialog box new $.Zebra_Dialog('This is the fourth dialog box. Notice that the backdrops are not ' + 'overlapping. Pressing ESC or clicking on the backdrop will close this dialog box ' + 'but not the other ones.', { auto_focus_button: $('body.materialize').length ? false : true, position: ['left + 20', 'top + 20'], title: 'Fourth dialog box' }); // we need to return false or the third dialog box will close return false; } } ], position: ['left + 20', 'bottom - 20'], title: 'Third dialog box' }); // we need to return false or the second dialog box will close return false; } } ], position: ['right - 20', 'top + 20'], title: 'Second dialog box' }); // we need to return false or the first dialog box will close return false; } } ], title: 'First dialog box' });
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" });
copyright © 2011 - stefan gabos