examples/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="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 dialog boxes.">
<link rel="shortcut icon" href="favicon.ico">
<title>Zebra Dialog - a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/united/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css" />
<link rel="stylesheet" href="../dist/css/classic/zebra_dialog.min.css" type="text/css">
<link rel="stylesheet" href="examples.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.min.js"></script>
<script>
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Zebra Dialog</h1>
<p>a small, compact, and highly configurable jQuery plugin for creating modal dialog boxes</p>
<hr>
<p>
<a href="https://github.com/stefangabos/Zebra_Dialog/archive/master.zip" class="btn btn-primary btn-lg" role="button" style="text-decoration: none">Download</a>
<a href="https://github.com/stefangabos/Zebra_Dialog" class="btn btn-primary btn-lg" role="button" style="text-decoration: none">View on GitHub</a>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<blockquote class="bg-warning"><small class="text-warning">See the examples with the dialog boxes using the <a href="flat.html">flat</a> or the <a href="materialize.html">materialize</a> theme.</small></blockquote>
<div class="row">
<div class="col-md-6">
<p>
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.
</p>
<p>
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.
</p>
<p>
Works in pretty much any browser - Firefox, Chrome, Safari, Edge, Opera and Internet Explorer 6+
</p>
</div>
<div class="col-md-6 text-center">
<img src="screenshot.png" alt="screenshot" width="438" height="210">
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-6">
01. <a href="#dialog-types">Dialog box types</a><br>
02. <a href="#handling-input">Correctly handling user input</a><br>
03. <a href="#custom-buttons">Custom buttons and the <code>onClose</code> event</a><br>
04. <a href="#custom-buttons-callback">Custom buttons with callback functions</a><br>
05. <a href="#positioning">Positioning</a><br>
06. <a href="#no-title">No title bar</a><br>
</div>
<div class="col-sm-6">
07. <a href="#notification-widget">Use as notification widget</a><br>
08. <a href="#content-from-element">Content loaded from an element on the page</a><br>
09. <a href="#content-from-ajax">Content loaded via AJAX</a><br>
10. <a href="#content-iframe">Content loaded in an iFrame</a><br>
11. <a href="#overlapping">Overlapping dialogs</a><br>
<a name="dialog-types"></a>
12. <a href="#customizing-appearance">Customizing the appearance</a><br>
</div>
</div>
<!-- =========================================================================================== -->
<br><h3><strong>1.</strong> Dialog box types</h3>
<pre class="brush:javascript">
// 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"
}
);
</pre>
<div class="well">
The six dialog box types are:
<a href="javascript:void(0)" id="example1_1">confirmation</a>,
<a href="javascript:void(0)" id="example1_2">error</a>,
<a href="javascript:void(0)" id="example1_3">information</a>,
<a href="javascript:void(0)" id="example1_4">prompt</a>,
<a href="javascript:void(0)" id="example1_5">question</a> and
<a href="javascript:void(0)" id="example1_6">warning</a>
</div>
<a name="handling-input"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>2.</strong> Correctly handling user input</h3>
<p>Handle input via the <code>onClose</code> event:</p>
<pre class="brush:javascript">
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:<br><br>\"" + prompt + "\"", {
auto_close: 2000,
buttons: false,
modal: false,
type: "confirmation"
});
else
new $.Zebra_Dialog("Input was cancelled", {
auto_close: 2000,
buttons: false,
modal: false,
type: "error"
});
}
}
);
</pre>
<div class="well">
Open <a href="javascript:void(0)" id="example2_1">dialog box</a>.
</div>
<p>Handle user input via button callback:</p>
<pre class="brush:javascript">
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:<br><br>\"" + prompt + "\"", {
auto_close: 2000,
buttons: false,
modal: false,
type: "confirmation"
});
}
}
]
}
);
</pre>
<div class="well">
Open <a href="javascript:void(0)" id="example2_2">dialog box</a>.
</div>
<a name="custom-buttons"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>3.</strong> Custom buttons and the <code>onClose</code> event</h3>
<pre class="brush:javascript">
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 <strong>onClose</strong> event.<br><br>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: 2000,
buttons: false,
modal: false
});
}
}
);
</pre>
<blockquote><small>
Note that the onClose event is executed <strong>after</strong> the dialog box is closed! See the
next example for executing functions <strong>before</strong> the closing of the dialog box
</small></blockquote>
<div class="well">
Click <a href="javascript:void(0)" id="example3">here</a> to open.
</div>
<a name="custom-buttons-callback"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>4.</strong> Custom buttons with callback functions</h3>
<pre class="brush:javascript">
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.<br><br>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: 2000,
buttons: false,
modal: false
});
}},
{caption: "No", callback: function() {
new $.Zebra_Dialog("\"No\" button was clicked", {
auto_close: 2000,
buttons: false,
modal: false
});
}},
{caption: "Cancel", callback: function() {
new $.Zebra_Dialog("\"Cancel\" button was clicked", {
auto_close: 2000,
buttons: false,
modal: false
});
}},
]
}
);</pre>
<blockquote><small>
Note that the callback functions attached to custom buttons are executed <strong>before</strong>
the dialog box is closed and as soon as a button is clicked! See the previous example for executing
functions <strong>after</strong> the closing of the dialog box
</small></blockquote>
<div class="well">
Click <a href="javascript:void(0)" id="example4">here</a> to open.
</div>
<a name="positioning"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>5.</strong> Positioning</h3>
<pre class="brush:javascript">
// 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 <strong>top-right</strong> corner, 20 pixels from the margins. Here's " +
"how it's done:<br><code>position: ['right - 20', 'top + 20']</code>",
{
position: ["right - 20", "top + 20"],
title: "Custom positioning",
width: 460
}
);</pre>
<div class="well">
Open a dial box in the <a href="javascript:void(0)" id="example5_1">top-left corner</a><br>
Open a dial box in the <a href="javascript:void(0)" id="example5_2">top-right corner</a><br>
Open a dial box in the <a href="javascript:void(0)" id="example5_3">bottom-right corner</a><br>
Open a dial box in the <a href="javascript:void(0)" id="example5_4">bottom-left corner</a><br>
Open a dial box in the <a href="javascript:void(0)" id="example5_5">the center of the screen</a><br>
Open a dial box in the <a href="javascript:void(0)" id="example5_6">horizontally centered, 50 pixels from the top edge</a>
</div>
<a name="no-title"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>6.</strong> No title bar</h3>
<pre class="brush:javascript">
new $.Zebra_Dialog(
"<strong>Zebra_Dialog</strong>, a small, compact and highly configurable dialog box plugin for jQuery"
);
</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example6">here</a> to open.
</div>
<a name="notification-widget"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>7.</strong> Use as notification widget</h3>
<pre class="brush:javascript">
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"]
}
);</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example7">here</a> to open.
</div>
<a name="content-from-element"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>8.</strong> Content loaded from an element on the page</h3>
<pre class="brush:javascript">
// 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()
},
title: "Content loaded from an element on the page",
width: 600
});</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example8">here</a> to open.
</div>
<a name="content-from-ajax"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>9.</strong> Content loaded via AJAX</h3>
<pre class="brush:javascript">
// 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"
},
title: "Content loaded via AJAX",
width: 600
});</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example9">here</a> to open.
</div>
<a name="content-iframe"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>10.</strong> Content loaded in an iFrame</h3>
<pre class="brush:javascript">
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
});
</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example10">here</a> to open.
</div>
<a name="overlapping"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>11.</strong> Overlapping dialogs</h3>
<pre class="brush:javascript">
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'
});</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example11">here</a> to open.
</div>
<a name="customizing-appearance"></a>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<!-- =========================================================================================== -->
<h3><strong>12.</strong> Customizing the appearance</h3>
<p>Let's make the title bar have a dark-blue background and show a custom icon</p>
<p>The CSS</p>
<pre class="brush: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;
}
</pre>
<p>The JavaScript</p>
<pre class="brush:javascript">
new $.Zebra_Dialog("I love coffee!", {
custom_class: "myclass",
title: "Customizing the appearance"
});</pre>
<div class="well">
Click <a href="javascript:void(0)" id="example12">here</a> to open.
</div>
<div class="top">
<a href="#top" class="small">▲ To the top</a>
</div>
<br>
<p class="text-center">copyright © 2011 - <script>var date = new Date; document.write(date.getFullYear());</script> <a href="https://github.com/stefangabos/">stefan gabos</a></p>
<br><br>
</div>
</div>
</div>
<div id="boxcontent" style="display: none">
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
<p>Lorem ipsum dolor sit amet consectetuer lorem tristique nec et euismod. At Donec nunc Morbi Sed Curabitur lobortis
leo porttitor Aenean nibh. Sed Curabitur dignissim nibh ac pretium tempus interdum Curabitur Vestibulum Morbi. Lacinia
in ante porta quis Vestibulum Nullam enim laoreet enim accumsan. Et non Proin semper rutrum sapien lorem in sit et
auctor. Quis sem pellentesque quis dui ligula vitae leo velit semper euismod.</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/zebra_pin@2.0.0/dist/zebra_pin.min.js"></script>
<script src="../dist/zebra_dialog.min.js"></script>
<script src="examples.js"></script>
</body>
</html>