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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load Bootstrap -->
<script src="../../../../global_assets/js/main/bootstrap.bundle.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/notifications/bootbox.min.js"></script>

// 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.

Public methods

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

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/notifications/jgrowl.min.js"></script>

// 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

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/notifications/noty.min.js"></script>

// Basic initialization
var n = noty({
	text: 'noty - a jquery notification library!'
});

Plugin options and defaults

// Options and defaults
$.noty.defaults = {
    layout: 'topRight',	 	   	       // top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight
    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
    timeout: false, 				   // delay for closing event in milliseconds
    progressBar: true, 			       // displays a progress bar if timeout is not false
    closeWith: ['click'], 			   // click and/or button
    animation: {
        open: 'noty_effects_open',     // or Animate.css class names like: 'animated bounceInLeft'
        close: 'noty_effects_close'    // or Animate.css class names like: 'animated bounceOutLeft'
    },
    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, 					   // displays as a modal
    id: false, 						   // enerated automatically if false
    queue: 'global', 				   // named queue system
    maxVisible: 5, 					   // you can set max visible notification for dismissQueue true option,
    killer: false, 					   // for close all notifications before show
    container: false, 				   // custom container selector string
    callback: {
    	beforeShow: function() {},
        onShow: function() {},
        afterShow: function() {},
        onClose: function() {},
        afterClose: function() {},
        onHover: function() {},
        onTemplate: function() {
            this.barDom.innerHTML = '<div class="my-custom-template noty_body">' + this.options.text + '<div>';
            // Important: .noty_body class is required for setText API method.
        }
    },
    buttons: [] 					   // an array of buttons
};

Plugin API

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/notifications/pnotify.min.js"></script>

// Initialization sample
$(function(){
    new PNotify({
        title: 'Regular Notice',
        text: 'Check me out! I\'m a notice.'
    });
});

Plugin options

Plugin modules

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.

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

<!-- Load jQuery -->
<script src="../../../../global_assets/js/main/jquery.min.js"></script>

<!-- Load plugin -->
<script src="../../../../global_assets/js/plugins/notifications/sweet_alert.min.js"></script>

// Basic initialization
swal('Any fool can use a computer');

// Advanced initialization
swal({
	title: 'Are you sure?',
	text: "You won't be able to revert this!",
	type: 'warning',
	showCancelButton: true,
	confirmButtonColor: '#3085d6',
	cancelButtonColor: '#d33',
	confirmButtonText: 'Yes, delete it!'
}).then((result) => {
	if (result.value) {
		swal(
			'Deleted!',
			'Your file has been deleted.',
			'success'
		)
	}
});

Plugin options

Plugin methods

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