Bootbox dialogs
Notifications bootbox.min.js
Overview

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script type="text/javascript" src="assets/js/core/libraries/bootstrap.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/notifications/bootbox.min.js"></script>

Call the plugin via JavaScript:

// Initialization example
bootbox.alert({ 
    size: 'small',
    message: "Your message here…", 
    callback: function(){ /* your callback code */ }
})
Alert dialog

A simple alert dialog with a single button. Pressing the ESC key or clicking the close button dismisses the dialog. If a callback is provided it is not passed any value when executed

Alert options:

// Options
bootbox.alert({ 
    size: 'small',
    message: "Your message here…", 
    callback: function(){ /* your callback code */ }
});
Confirm dialog

A confirm dialog with a cancel and a confirm button. Pressing the ESC key or clicking close dismisses the dialog and invokes the callback as if the user had clicked the cancel button

Confirm options:

// Options
bootbox.confirm({ 
    size: 'small',
    message: "Your message here…", 
    callback: function(result){ /* your callback code */ }
});
Prompt dialog

A dialog which prompts for user input. Pressing the ESC key or clicking close dismisses the dialog and invokes the callback as if the user had clicked the cancel button. Prompt dialogs require a callback function.

Prompt options:

// Options
bootbox.prompt({ 
    size: 'small',
    message: "Your message here…", 
    callback: function(result){ /* your callback code */ }
})
Dialog options

Options can be passed in as a JavaScript object. Please note that not all options are valid for all dialog types.

Option Type Description
message String | Element [Required]. Text (or markup) displayed in the dialog
title String | Element Adds a header to the dialog and places this text (or markup) in an <h4> element
locale String The locale settings used to translate the three standard button labels: OK, CONFIRM, CANCEL. Default: en. Currently available: bg_BG, br, cs, da, de, el, en, es, et, fa, fi, fr, he, hu, hr, id, it, ja, lt, lv, nl, no, pl, pt, ru sq, sv, th, tr, zh_CN, zh_TW
callback Function [Required]. An alert callback should not supply an argument; it will be ignored if it does. Confirm and prompt callbacks must supply an argument for the result; for confirm, it will be a true or false value, while the prompt result will hold the value entered by the user
onEscape Boolean | Function Allows the user to dismisss the dialog by hitting ESC, which will invoke this function
show Boolean Whether the dialog should be shown immediately
backdrop Boolean Whether the dialog should be have a backdrop or not. Also determines whether clicking on the backdrop dismisses the modal
closeButton Boolean Whether the dialog should have a close button or not
animate Boolean Animate the dialog in and out (requires a browser which supports CSS animations)
className String An additional class to apply to the dialog wrapper. Default null
size String Adds the relevant Bootstrap modal size class to the dialog wrapper. Valid values are 'large' and 'small'
buttons Object [Required]. Buttons are defined as JavaScript objects
Public methods

Options can be passed in as a JavaScript object. Please note that not all options are valid for all dialog types.

Method Description
bootbox.init(function) Allows the user to supply a function to be called when dialog gets initialized
bootbox.setDefaults(object options) This method allows the user to set many of the default options. Many of these options are also applied to the basic wrapper methods and can be overridden whenever the wrapper methods are invoked with a single options argument
bootbox.addLocale(String name, object values) Allows the user to add a custom translation for each of the built-in command buttons
bootbox.removeLocale(String name) Allows the user to remove a locale from the available locale settings
bootbox.setLocale(String name) Allows the user to select a locale rather than using setDefaults("locale", ...)
bootbox.hideAll() Hide all currently active bootbox dialogs. Individual dialogs can be closed as per normal Bootstrap dialogs
Plugin info
Property Description
File name bootbox.min.js
Location assets/js/plugins/notifications/
Updates 0
Links

Official plugin website

Full documentation

Github project page
jGrowl notifications
Notifications jgrowl.min.js
Overview

jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. The idea is simple, deliver notifications to the end user in a noticeable way that doesn't obstruct the work flow and yet keeps the user informed.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/notifications/jgrowl.min.js"></script>

Call the plugin via JavaScript:

// Sample 1
$.jGrowl("Hello world!");

// Sample 2
$.jGrowl("Stick this!", {
	sticky: true
});

// Sample 3
$.jGrowl("A message with a header", {
	header: 'Important'
});

// Sample 4
$.jGrowl("A message that will live a little longer.", {
	life: 10000
});

// Sample 5
$.jGrowl("A message with a beforeOpen callback and a different opening animation.", {
    beforeClose: function(e,m) {
        alert('About to close this notification!');
    },
    animateOpen: {
        height: 'show'
    }
});
Plugin options
Option Default Description
pool 0 Limit the number of messages appearing at a given time to the number in the pool
header empty Optional header to prefix the message, this is often helpful for associating messages to each other
group empty A css class to be applied to notifications when they are created, useful for 'grouping' notifications by a css selector
sticky false When set to true a message will stick to the screen until it is intentionally closed by the user
position top-right Designates a class which is applied to the jGrowl container and controls its position on the screen. By Default there are five options available, top-left, top-right, bottom-left, bottom-right, center. This must be changed in the defaults before the startup method is called
appendTo body The element where our jGrowl messages are appended to. The default is body but feel free to define another one
glue after Designates whether a jGrowl notification should be appended to the container after all notifications, or whether it should be prepended to the container before all notifications. Options are after or before
theme default A CSS class designating custom styling for this particular message, intended for use with jQuery UI
themeState highlight A CSS class designating custom styling for this particular message and its state, intended for use with jQuery UI
corners 10px If the corners jQuery plugin is include this option specifies the curvature radius to be used for the notifications as they are created
check 250 The frequency that jGrowl should check for messages to be scrubbed from the screen.This must be changed in the defaults before the startup method is called
life 3000 The lifespan of a non-sticky message on the screen
closeDuration normal The animation speed used to close a notification
openDuration normal The animation speed used to open a notification
easing swing The easing method to be used with the animation for opening and closing a notification
closer true Whether or not the close-all button should be used when more then one notification appears on the screen. Optionally this property can be set to a function which will be used as a callback when the close all button is clicked. This must be changed in the defaults before the startup method is called
closeTemplate × This content is used for the individual notification close links that are added to the corner of a notification. This must be changed in the defaults before the startup method is called
closerTemplate <div>[ close all ]</div> This content is used for the close-all link that is added to the bottom of a jGrowl container when it contains more than one notification. This must be changed in the defaults before the startup method is called
log function(e,m,o) {} Callback to be used before anything is done with the notification. This is intended to be used if the user would like to have some type of logging mechanism for all notifications passed to jGrowl. This callback receives the notification's DOM context, the notifications message and its option object
beforeOpen function(e,m,o) {} Callback to be used before a new notification is opened. This callback receives the notification's DOM context, the notifications message and its option object
afterOpen function(e,m,o) {} Callback to be used after a new notification is opened. This callback receives the notification's DOM context, the notifications message and its option object
open function(e,m,o) {} Callback to be used when a new notification is opened. This callback receives the notification's DOM context, the notifications message and its option object
beforeClose function(e,m,o) {} Callback to be used before a new notification is closed. This callback receives the notification's DOM context, the notifications message and its option object
close function(e,m,o) {} Callback to be used when a new notification is closed. This callback receives the notification's DOM context, the notifications message and its option object
animateOpen { opacity: 'show' } The animation properties to use when opening a new notification (default to fadeOut)
animateClose { opacity: 'hide' } The animation properties to use when closing a new notification (defaults to fadeIn)
Plugin info
Property Description
File name jgrowl.min.js
Location assets/js/plugins/notifications/
Updates 0
Links Github project page
Noty notifications
Notifications noty.min.js
Overview

NOTY is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue. The notifications can be positioned at the: top - topLeft - topCenter - topRight - center - centerLeft - centerRight - bottom - bottomLeft - bottomCenter - bottomRight.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/notifications/noty.min.js"></script>

Call the plugin via JavaScript:

// Basic initialization
var n = noty({
	text: 'noty - a jquery notification library!'
});
Plugin options and defaults
// Options and defaults
$.noty.defaults = {
    layout: 'top',
    theme: 'defaultTheme',
    type: 'alert', // alert, success, error, warning, information, confirm
    text: '', // can be html or string
    dismissQueue: true, // If you want to use queue feature set this true
    template: '<div class="noty_message"><span class="noty_text"></span><div class="noty_close"></div></div>',
    animation: {
        open: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceInLeft'
        close: {height: 'toggle'}, // or Animate.css class names like: 'animated bounceOutLeft'
        easing: 'swing',
        speed: 500 // opening & closing animation speed
    },
    timeout: false, // delay for closing event. Set false for sticky notifications
    force: false, // adds notification to the beginning of queue when set to true
    modal: false,
    maxVisible: 5, // you can set max visible notification for dismissQueue true option,
    killer: false, // for close all notifications before show
    closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications
    callback: {
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {},
        onCloseClick: function() {},
    },
    buttons: false // an array of buttons
};
Plugin API
Option Description
$.noty.get(id) Returns a NOTY javascript object
$.noty.close(id) Close a NOTY - same as var n = noty({text: 'Hi!'})); n.close();
$.noty.clearQueue() Clears the notification queue
$.noty.closeAll() Close all notifications
$.noty.setText(id, text) Notification text updater - same as var n = noty({text: 'Hi!'})); n.setText('Hi again!');
$.noty.setType(id, type) Notification type updater - same as var n = noty({text: 'Hi!'})); n.setType('error');
Plugin info
Property Description
File name noty.min.js
Location assets/js/plugins/notifications/
Updates 0
Links

Official plugin website

Github project page
PNotify notifications
Notifications pnotify.min.js
Overview

PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. PNotify provides desktop notifications based on the Web Notifications Draft. If desktop notifications are not available or not allowed, PNotify will fall back to displaying the notice as a regular, in-browser notice.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/notifications/pnotify.min.js"></script>

Call the plugin via JavaScript:

// Initialization sample
$(function(){
    new PNotify({
        title: 'Regular Notice',
        text: 'Check me out! I\'m a notice.'
    });
});
Plugin options
Option Default Description
title false The notice's title
title_escape false Whether to escape the content of the title. (HTML not allowed)
text false The notice's text
text_escape false Whether to escape the content of the text. (HTML not allowed)
styling "brighttheme" What styling classes to use. (Can be either "brighttheme", "jqueryui", "bootstrap2", "bootstrap3", "fontawesome", or a custom style object)
addclass "" Additional classes to be added to the notice
cornerclass "" Class to be added to the notice for corner styling
auto_display true Display the notice when it is created. Turn this off to add notifications to the history without displaying them
width "300px" Width of the notice
min_height "16px" Minimum height of the notice. It will expand to fit content
type "notice" Type of the notice. "notice", "info", "success", or "error"
icon true Set icon to true to use the default icon for the selected style/type, false for no icon, or a string for your own icon class
animation "fade" The animation to use when displaying and hiding the notice. "none", "show", "fade", and "slide" are built in to jQuery. Others require jQuery UI. Use an object with effect_in and effect_out to use different effects
animate_speed "slow" Speed at which the notice animates in and out. "slow", "def" or "normal", "fast" or number of milliseconds
position_animate_speed 500 Specify a specific duration of position animation
opacity 1 Opacity of the notice
shadow true Display a drop shadow
hide true After a delay, remove the notice
delay 8000 Delay in milliseconds before the notice is removed
mouse_reset true Reset the hide timer if the mouse moves over the notice
remove true Remove the notice's elements from the DOM after it is removed
insert_brs true Change new lines to br tags
stack - The stack on which the notices will be placed. Also controls the direction the notices stack
Plugin modules
Option Default Description
Desktop. desktop: {...}
desktop false Display the notification as a desktop notification
fallback true If desktop notifications are not supported or allowed, fall back to a regular notice
icon null The URL of the icon to display. If false, no icon will show. If null, a default icon will show
tag null Using a tag lets you update an existing notice, or keep from duplicating notices between tabs. If you leave tag null, one will be generated, facilitating the "update" function
Buttons. buttons: {...}
closer true Provide a button for the user to manually close the notice
closer_hover true Only show the closer button on hover
sticker true Provide a button for the user to manually stick the notice
sticker_hover true Only show the sticker button on hover
show_on_nonblock false Show the buttons even when the nonblock module is in use
labels {close: "Close", stick: "Stick"} Lets you change the displayed text, facilitating internationalization
NonBlock. nonblock: {...}
nonblock false Create a non-blocking notice. It lets the user click elements underneath it
nonblock_opacity 0.2 The opacity of the notice (if it's non-blocking) when the mouse is over it
Confirm. confirm: {...}
confirm false Make a confirmation box
prompt false Make a prompt
prompt_class "" Classes to add to the input element of the prompt
prompt_default "" The default value of the prompt
prompt_multi_line false Whether the prompt should accept multiple lines of text
align "right" Where to align the buttons. (right, center, left, justify)
buttons [{text: "Ok", addClass: "", promptTrigger: true, click: function(notice, value){ notice.remove(); notice.get().trigger("pnotify.confirm", [notice, value]); }},{text: "Cancel", addClass: "", click: function(notice){ notice.remove(); notice.get().trigger("pnotify.cancel", notice); }}] The buttons to display, and their callbacks. If a button has promptTrigger set to true, it will be triggered when the user hits enter in a single line prompt
History. history: {...}
history true Place the notice in the history
menu false Display a pull down menu to redisplay previous notices
fixed true Make the pull down menu fixed to the top of the viewport
maxonscreen Infinity Maximum number of notifications to have onscreen
labels {redisplay: "Redisplay", all: "All", last: "Last"} Lets you change the displayed text, facilitating internationalization
Reference. reference: {...}
putThing false Maximum number of notifications to have onscreen
labels {text: "Spin Around"} Provide a thing for stuff. Turned off by default
Plugin callbacks

The callback options all expect one argument, a function, which will be called when that event occurs. They can be included in the options object passed to PNotify() just like any other options. If the function returns false on the "before_open" or "before_close" callback, that event will be canceled.

Callback Description
before_init This option is called before the notice has been initialized. It accepts one argument, the options object
after_init This option is called after the notice has been initialized. It accepts one argument, the notice object
before_open This option is called before the notice has been displayed. It accepts one argument, the notice object
after_open This option is called after the notice has been displayed. It accepts one argument, the notice object
before_close This option is called before the notice closes. It accepts one argument, the notice object
after_close This option is called after the notice closes. It accepts one argument, the notice object
Plugin info
Property Description
File name pnotify.min.js
Location assets/js/plugins/notifications/
Updates 0
Links

Official plugin website

Demonstration

Github project page
Sweet alerts
Notifications sweet_alert.min.js
Overview

Sweet Alert is a JavaScript notification plugin for a beautiful alert replacement. SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet.

Usage

Include the following lines of code in the <head> section of your HTML:

<!-- Load jQuery -->
<script type="text/javascript" src="assets/js/core/libraries/jquery.min.js"></script>

<!-- Load plugin -->
<script type="text/javascript" src="assets/js/plugins/notifications/sweet_alert.min.js"></script>

Call the plugin via JavaScript:

// Basic initialization
swal("Oops...", "Something went wrong!", "error");

More advanced example - a warning message, with a function attached to the "Confirm" button:

// Advanced initialization
swal({
	title: "Are you sure?",
	text: "You will not be able to recover this imaginary file!",
	type: "warning",
	showCancelButton: true,
	confirmButtonColor: "#DD6B55",
	confirmButtonText: "Yes, delete it!",
	closeOnConfirm: false,
	html: false
}, function() {
	swal(
		"Deleted!",
		"Your imaginary file has been deleted.",
		"success"
	);
});
Plugin options
Option Default Description
title null (required) The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function
text null A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function
type null The type of the modal. SweetAlert comes with 4 built-in types which will show a corresponding icon animation: "warning", "error", "success" and "info". You can also set it as "input" to get a prompt modal. It can either be put in the object under the key "type" or passed as the third parameter of the function
allowEscapeKey true If set to true, the user can dismiss the modal by pressing the escape key
customClass null A custom CSS class for the modal. It can be added to the object under the key "customClass"
allowOutsideClick false If set to true, the user can dismiss the modal by clicking outside it
showCancelButton false If set to true, a "Cancel" button will be shown, which the user can click on to dismiss the modal
showConfirmButton true If set to false, the "OK/Confirm" button will be hidden. Make sure you set a timer or set allowOutsideClick to true when using this, in order not to annoy the user
confirmButtonText "OK" Use this to change the text on the "Confirm" button. If showCancelButton is set as true, the confirm button will automatically show "Confirm" instead of "OK"
confirmButtonColor "#AEDEF4" Use this to change the background color of the "Confirm" button (must be a HEX value)
cancelButtonText "Cancel" Use this to change the text on the "Cancel" button
closeOnConfirm true Set to false if you want the modal to stay open even if the user presses the "Confirm" button. This is especially useful if the function attached to the "Confirm" button is another SweetAlert
closeOnCancel true Same as closeOnConfirm, but for the cancel button
imageUrl null Add a customized icon for the modal. Should contain a string with the path to the image
imageSize "80x80" If imageUrl is set, you can specify imageSize to describes how big you want the icon to be in px. Pass in a string with two values separated by an "x". The first value is the width, the second is the height
timer null Auto close timer of the modal. Set in ms (milliseconds)
html false If set to true, will not escape title and text parameters. (Set to false if you're worried about XSS attacks.)
animation true If set to false, the modal's animation will be disabled. Possible (string) values: pop (default when animation set to true), slide-from-top, slide-from-bottom
inputType "text" Change the type of the input field when using type: "input" (this can be useful if you want users to type in their password for example).
inputPlaceholder null When using the input-type, you can specify a placeholder to help the user
inputValue null Specify a default text value that you want your input to show when using type: "input"
showLoaderOnConfirm false Set to true to disable the buttons and show that something is loading
Plugin methods

SweetAlert also comes with some simple methods that you can call:

Callback Example Description
setDefaults swal.setDefaults({ confirmButtonColor: '#0000' }); If you end up using a lot of the same settings when calling SweetAlert, you can use setDefaults at the start of your program to set them once and for all!
close swal.close(); Close the currently open SweetAlert programatically
showInputError swal.showInputError("Invalid email!"); Show an error message after validating the input field, if the user's data is bad
enableButtons, disableButtons swal.disableButtons(); Disable or enable the user to click on the cancel and confirm buttons
Plugin info
Property Description
File name sweet_alert.min.js
Location assets/js/plugins/notifications/
Updates 0
Links

Official plugin website

Github project page