a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes
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, 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 + "\"", {type: "confirmation"});
else
new $.Zebra_Dialog("Input was cancelled", {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",
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 + "\"", {type: "confirmation"});
}
}
]
}
);
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 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 + "\"" : "nothing") + " was clicked", {
auto_close: 2000,
buttons: false,
modal: false,
position: ["center", "center"]
});
}
}
);
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() { new $.Zebra_Dialog("\"Yes\" was clicked", options); }},
{caption: "No", callback: function() { new $.Zebra_Dialog("\"No\" was clicked", options);}},
{caption: "Cancel", callback: function() { new $.Zebra_Dialog("\"Cancel\" was clicked", options); }}
]
}
);
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 8 seconds. You can dismiss me earlier than that by clicking on me.",
{
buttons: false,
modal: false,
position: ["right - 20", "top + 20"],
auto_close: 8000
}
);
// unless explicitly specified, the height of the dialog box will
// be automatically computed to fit the loaded content's height
new $.Zebra_Dialog({
source: {
inline: $("#boxcontent").html()
},
width: 600,
title: "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
new $.Zebra_Dialog({
source: {
ajax: "ajax.html"
},
width: 600,
title: "Content loaded via AJAX"
});
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
});
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 - 2019 stefan gabos