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+) 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+
1. Dialog box types
// 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"
}
);
2. Correctly handling user input
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"
);
}
});
3. Custom buttons and the onClose event
new $.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
4. Custom buttons with callback functions
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
5. Positioning
// 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
}
);
Open a dial box in the top-left corner
Open a dial box in the top-right corner
Open a dial box in the bottom-right corner
Open a dial box in the bottom-left corner
Open a dial box in the the center of the screen
Open a dial box in the horizontally centered, 50 pixels from the top edge
Open a dial box in the top-right corner
Open a dial box in the bottom-right corner
Open a dial box in the bottom-left corner
Open a dial box in the the center of the screen
Open a dial box in the horizontally centered, 50 pixels from the top edge
6. No title bar
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"
}
);
7. Use as notification widget
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"]
}
);
8. Content loaded from an element on the page
// 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
});
9. Content loaded via AJAX
// 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
});
10. Content loaded in an iFrame
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
});
11. Overlapping dialogs
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'
});
12. Customizing the appearance
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