Some nice scripts to for building jQuery and bootstrap based web applications.
A jQuery modal dialog plugin based on the bootstrap CSS blue print. Has some nice features such as ajax forms / links, page load indicators and other nice gimmics. Can create in-page modal boxes too, but is basically made for navigation within chains of dialog windows.
Dialogs can be created both using JavaScript and via special links on a page.
Display a simple alert. (View source)
Embedding the dialog in the (see automatic links)
<a class="open-dialog" closeOnEscape="false" closeOnOverlayClick="false" showCloseHandle="false" rel="sample1-dialog">simple alert</a>
<!-- which is equivalent to the following JavaScript snippet -->
<script type="text/javascript">
$(function() {
$("#sample1-dialog").dialog2({
showCloseHandle: false,
removeOnClose: false,
autoOpen: false,
closeOnEscape: false,
closeOnOverlayClick: false
});
$(".open-dialog").click(function(event) {
event.preventDefault();
$("#sample1-dialog").dialog2("open");
});
});
</script>
The dialogs contents (read more about it here)
<div id="sample1-dialog" style="display: none">
<h1>Simple alert</h1>
<p>
It is always beneficial to acknowledge alerts of any kind.
You can close this alert if you agree.
(Note: Normally a dialog box is not that penetrating)
</p>
<div class="form-actions">
<button class="btn-primary close-dialog">Understood</button>
<button class="btn-danger" onclick="alert('You might reconsider your click behaviour!')">I don't care</button>
</div>
</div>
A dialogs content can be loaded via ajax. Inside a dialog, the user can navigate via links as well as form submissions. Additionally navigation can be programmatically controlled via JavaScript. In most cases however there is barely any JavaScript needed to set up page flow within a dialog (see how html markup impacts the dialog).
Check out running example. (View source)
Embedding the dialog in the (see automatic links)
<a class="open-dialog" rel="sample2-dialog" href="pages/dialog1.html">running example</a>
Contents of first dialog page
<!DOCTYPE html>
<html>
<head>
<title>jQuery dialog2 plugin</title>
</head>
<body>
<h1>My Dialog</h1>
<p>
This is some fine body.
<a class="ajax" href="pages/dialog2.html">Click this link</a> (will stay in dialog).
</p>
<div class="form-actions">
<a class="btn close-dialog" href="#">Cancel</a>
</div>
</body>
</html>
Contents of second dialog page
<!DOCTYPE html>
<html>
<head>
<title>jQuery dialog2 plugin</title>
</head>
<body>
<h1>Thanks :-)</h1>
<p>
Thanks for clicking the previous link. May you tell me your name?
</p>
<form class="ajax" method="get" action="pages/finish.html">
<fieldset>
<div class="clearfix">
<label for="name">Your name</label>
<div class="input">
<input type="text" name="name" id="name" />
</div>
</div>
</fieldset>
<div class="form-actions">
<input type="submit" value="Send" class="btn btn-primary" />
<a class="btn close-dialog" href="#">Cancel</a>
</div>
</form>
</body>
</html>
Contents of final dialog page
<!DOCTYPE html>
<html>
<head>
<title>jQuery dialog2 plugin</title>
</head>
<body>
<h1>That's really it</h1>
<p>
All right, so much about this short demo.
</p>
<script type="text/javascript">
$("#sample2-dialog").dialog2({
buttons: {
"Close": function() {
$(this).dialog2("close");
}
}
});
</script>
</body>
</html>
The dialog plugin exposes a jquery interface which can be invoked via JavaScript.
The jquery method dialog2 is both the constructor for new
dialogs and the provider of the API.
The constructor accepts an options argument like $(".selector").dialog2(options)
and the invocation of an API method starts with the method name and the list of method
arguments like $(".selector").dialog2("removeButton", "Close").
See detailed notes on that.
It is possible to pass a content attribute to the dialog via its constructor options
to make the dialog display a certain web page.
<a href="#" id="show-server-notice-link">show me some server content!</a>
<script type="text/javascript">
$(function() {
$("#show-server-notice-link").click(function(event) {
$('<div/>').dialog2({
title: "Server notice",
content: "pages/notice.html",
id: "server-notice"
});
event.preventDefault();
});
});
</script>
Dialogs can be created using an existing element as a body or by aggregating a number of elements in it.
Create and open dialog
from single div. No AJAX is needed here
(View source)
This is an alert! Just want to inform you about that.
<div id="alert">
<p>This is an alert! Just want to inform you about that.</p>
</div>
<script type="text/javascript">
$(function() {
$("#alert").dialog2({
title: "Alert",
autoOpen: false,
buttons: {
Close: {
primary: true,
click: function() {
$(this).dialog2("close");
}
}
},
removeOnClose: false
});
});
</script>
Open dialog which aggregates a number of elements. No AJAX is needed here (View source)
foo
and
bar
makes
foobar
<p class="custom-dialog-content">
foo
</p>
<p class="custom-dialog-content">
and
</p>
<p class="custom-dialog-content">
bar
</p>
<p class="custom-dialog-content">
makes
</p>
<p class="custom-dialog-content">
foobar
</p>
<script type="text/javascript">
$(function() {
$(".custom-dialog-content").dialog2({
title: "Alert",
id: "alert2",
autoOpen: false,
buttons: {
Close: {
primary: true,
click: function() {
$(this).dialog2("close");
}
}
},
removeOnClose: false
});
});
</script>
Dialog will show load indicator every time an ajax request is done to load
new dialog pages from somewhere. If response body contains a h1
the contents of this heading will be the new dialog title.
If response html contains a submitable form.ajax a submit handler
will be bound the dialog and a submit button will be added to the dialog while
the original submit button (if any) will be hidden.
a.ajax links within the dialog content will trigger loading of a new
dialog page inside the dialog.
In conjunction with the jquery.controls plugin, the dialog will register
dialog open for all a.open-dialog within a document. The title will be
via the links title attribute and the id is determined via the links rel
attribute (see previous examples on that).
The dialog will change its apperance and behaviour based on its contents:
h1 text content is used as the dialogs title.
a.ajax elements in the dialogs content
navigate to new pages within the dialog.
form.ajax elements are ajax-submitted
and the response is displayed as the new content
of the dialog.
input[type=submit], input[type=reset], input[type=button], button, .btn)
within a .form-actions element inside the dialog body are
treated as buttons and override the dialogs current buttons.
Buttons added to the dialog will inherit the original buttons class,
click behaviour and text (e.g. a button mapping to a
input[type=submit]
will submit the form the original input was attached to).
Submit this dialog to go to heaven!
<a href="#" rel="alert3" class="open-dialog">Demonstrate that!</a>
<div id="alert3">
<h1>This is a special alert</h1>
<p>Submit this dialog to go to heaven!</p>
<form class="ajax" method="get" action="pages/heaven.html">
<input type="hidden" name="nothing" value="to-see" />
<div class="form-actions">
<input type="submit" class="primary" />
<a class="btn close-dialog" href="#">Close</a>
</div>
</form>
</div>
Or let me at least decide on my favourite button color! (View source)
<a href="#" rel="alert4" class="open-dialog">decide on my favourite button color!</a>
<div id="alert4">
<h1>Decision</h1>
<p>Decide on an option</p>
<div class="form-actions">
<a class="btn btn-info" href="#">Info</a>
<a class="btn btn-success" href="#">Success</a>
<button class="btn btn-danger">Danger</button>
<button class="btn dialog-close">Close</button>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#alert4 .form-actions > *").click(function() {
alert("You chose " + $(this).text());
});
});
</script>
alert, confirm and prompt helpers
The script file jquery.dialog2.helpers.js provides unobstrusive
counterparts to the window functions alert, confirm and prompt.
They are available as function in the namespace $.fn.dialog2.helpers.*.
Check out alert, confirm, prompt (View source)
<a href="#" id="show-alert">alert</a>,
<a href="#" id="show-confirm">confirm</a>,
<a href="#" id="show-prompt">prompt</a>
<script type="text/javascript">
$("#show-alert").click(function(event) {
$.fn.dialog2.helpers.alert("This dialog is non intrusive", {
close: function() {
alert("This one is!");
}
});
event.preventDefault();
});
$("#show-prompt").click(function() {
$.fn.dialog2.helpers.prompt("What is your age?", {
ok: function(event, value) { alert("Your age is: " + value); },
cancel: function() { alert("Better tell me!"); }
});
event.preventDefault();
});
$("#show-confirm").click(function() {
$.fn.dialog2.helpers.confirm("Is this dialog non intrusive?", {
confirm: function() { alert("You said yes? Well... no"); },
decline: function() { alert("You said no? Right choice!") }
});
event.preventDefault();
});
</script>
One can hook into the dialog by listening to events prefixed with dialog2..
The events observed during the life cycle of a dialog are sumarized in the table below:
| event name | semantics |
|---|---|
dialog2.before-open | the dialog is about to open |
dialog2.opened | the dialog was opened |
dialog2.focussed | the dialog gains focus |
dialog2.ajax-start | an ajax update is about to start |
dialog2.before-send | the xhr request is about to be sent inside the dialog (on form submit or content load). jqXhr, settings is passed as additional arguments |
| Updating the contents with the dialogs initial html | |
dialog2.content-update | update content |
dialog2.before-ajaxify | before applying ajax controls to content |
dialog2.after-ajaxify | after applying ajax controls to content |
dialog2.before-update-markup | before updating the dialog markup from content HTML (e.g. update button bar) |
dialog2.after-update-markup | after updating the dialog markup |
dialog2.focussed | the dialog gains focus once more (selects first focusable element) |
dialog2.ajax-complete | ajax operation is complete |
| Updating the contents with the response received from the server (events have same semantics as explained above) | |
dialog2.content-update | |
dialog2.before-ajaxify | |
dialog2.after-ajaxify | |
dialog2.before-update-markup | |
dialog2.after-update-markup | |
dialog2.focussed | |
dialog2.closed | the dialog is closed |
Check out the plugin documentation.