Live preview
Documentation - Notifications

Bootbox dialogs

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 Bootstrap -->
												<script src="assets/js/bootstrap/bootstrap.bundle.min.js"></script>

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

Call the plugin via JavaScript:

											
												// Initialization example
												bootbox.alert({
													title: 'Check this out!',
													message: 'Native alert dialog has been replaced with Bootbox alert box.'
												});

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({
												title: 'Check this out!',
												message: 'Native alert dialog has been replaced with Bootbox alert box.'
											});

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({
												title: 'Confirm dialog',
												message: 'Native confirm dialog has been replaced with Bootbox confirm box.',
												buttons: {
													confirm: {
														label: 'Yes',
														className: 'btn-primary'
													},
													cancel: {
														label: 'Cancel',
														className: 'btn-link'
													}
												},
												callback: function (result) {
													bootbox.alert({
														title: 'Confirmation result',
														message: 'Confirm result: ' + result
													});
												}
											});

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({
												title: 'Please enter your name',
												buttons: {
													confirm: {
														label: 'Yes',
														className: 'btn-primary'
													},
													cancel: {
														label: 'Cancel',
														className: 'btn-link'
													}
												},
												callback: function (result) {
													if (result === null) {                                             
														bootbox.alert({
															title: 'Prompt dismissed',
															message: 'You have cancelled this damn thing'
														});                              
													} else {
														bootbox.alert({
															title: 'Hi <strong>' + result + '</strong>',
															message: 'How are you doing today?'
														});                              
													}
												}
											});

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/vendor/notifications/
Links

Official plugin website

Full documentation

Github project page

Noty notifications

noty.min.js

Overview

NOTY is a JavaScript 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 plugin -->
												<script src="assets/js/vendor/notifications/noty.min.js"></script>

Call the plugin via JavaScript:

											
												// Basic initialization
												new Noty({
													text: 'Change a few things up and try submitting again.',
													type: 'error'
												}).show();

Plugin options and defaults

Option Default Info
type: string 'alert' alert, success, error, warning, info - ClassName generator uses this value → noty_type__${type}
layout: string 'topRight' top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight - ClassName generator uses this value → noty_layout__${layout}
theme: string 'mint' relax, mint, metroui - ClassName generator uses this value → noty_theme__${theme}
text: string '' This string can contain HTML too. But be careful and don't pass user inputs to this parameter.
timeout: boolean,int false false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set 'false' for sticky notifications.
progressBar: boolean true true, false - Displays a progress bar if timeout is not false.
closeWith: [...string] ['click'] click, button
animation.open: string,null,function 'noty_effects_open' If string, assumed to be CSS class name. If null, no animation at all. If function, runs the function. (v3.0.1+) You can use animate.css class names or your custom css animations as well.
animation.close: string,null,function 'noty_effects_close' If string, assumed to be CSS class name. If null, no animation at all. If function, runs the function. (v3.0.1+) You can use animate.css class names or your custom css animations as well.
sounds.sources: [...string] [] v3.1.0-beta Array of audio sources e.g 'some.wav' Check browser support
sounds.volume: int 1 v3.1.0-beta Integer value between 0-1 e.g 0.5 Check browser support
sounds.conditions: [...string] [] v3.1.0-beta There are two conditions for now: 'docVisible' & 'docHidden'. You can use one of them or both. Check browser support
docTitle.conditions: [...string] [] v3.1.0-beta There are two conditions for now: 'docVisible' & 'docHidden'. You can use one of them or both.
modal: boolean false v3.1.0-beta Behaves like v2 but more stable
id: string,boolean false You can use this id with querySelectors. Generated automatically if false.
force: boolean false DOM insert method depends on this parameter. If false uses append, if true uses prepend.
queue: string 'global' NEW Named queue system. Details are here.
killer: boolean,string false If true closes all visible notifications and shows itself. If string(queueName) closes all visible notification on this queue and shows itself.
container: boolean,string false Custom container selector string. Like '.my-custom-container'. Layout parameter will be ignored.
buttons: [...Noty.button] [] An array of Noty.button, for creating confirmation dialogs. Details are here.
callbacks.beforeShow: function Default: () => {} Details are here.
callbacks.onShow: function Default: () => {} Details are here.
callbacks.afterShow: function Default: () => {} Details are here.
callbacks.onClose: function Default: () => {} Details are here.
callbacks.afterClose: function Default: () => {} Details are here.
callbacks.onHover: function Default: () => {} Details are here.
callbacks.onClick: function Default: () => {} Only works if closeWith = ['click']. Details are here.
callbacks.onTemplate: function Default: () => {} Mainly for DOM manipulations. Details are here.
visibilityControl: boolean false If true Noty uses PageVisibility API to handle timeout. To ensure that users do not miss their notifications.

You can also override default values:

										
											Noty.overrideDefaults({
												layout   : 'topRight',
												theme    : 'mint',
												closeWith: ['click', 'button'],
												animation: {
													open : 'animated fadeInRight',
													close: 'animated fadeOutRight'
												}
											});

Plugin API

Option Description
n.show() Show a NOTY
n.close(); Close a NOTY
n.setText('Hi again!'); Notification text updater. Important: .noty_body class is required for setText API method.
n.setType('error'); Notification type updater
n.setTheme('newTheme'); Notification theme updater
n.setTimeout(4500); false (clears timeout) or integer (clears timer, starts for given value)
n.stop(); Clears the timeout
n.resume(); Restarts the timeout
Noty.closeAll(); Closes all notifications
Noty.closeAll('myCustomQueueName'); Closes all notifications with queue named 'myCustomQueueName'
Noty.setMaxVisible(10); Sets the maxVisible notification count for global queue;
Noty.setMaxVisible(10, 'myCustomQueueName'); Sets the maxVisible notification count for 'myCustomQueueName' queue;

Plugin info

Property Description
File name noty.min.js
Location assets/js/vendor/notifications/
Links

Official plugin website

Github project page

Sweet alerts

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 plugin -->
												<script src="assets/js/vendor/notifications/sweet_alert.min.js"></script>

Call the plugin via JavaScript:

												
													// Basic initialization
													Swal.fire(
														'The Internet?',
														'That thing is still around?',
														'question'
													)

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

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

Plugin options

Argument Default value Description
title '' The title of the popup, as HTML.
titleText '' The title of the popup, as text. Useful to avoid HTML injection.
html '' A HTML description for the popup.
If text and html parameters are provided in the same time, html will be used.
[Security] SweetAlert2 does NOT sanitize this parameter. It is the developer's responsibility to escape any user input when using the html option, so XSS attacks would be prevented.
text '' A description for the popup.
If text and html parameters are provided in the same time, html will be used.
icon undefined The icon of the popup. SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation: warning, error, success, info, and question. It can either be put in the array under the key "icon" or passed as the third parameter of the function.
iconColor undefined Use this to change the color of the icon.
iconHtml undefined The custom HTML content for an icon.
showClass 
															
																{
																	popup: 'swal2-show',
																	backdrop: 'swal2-backdrop-show',
																	icon: 'swal2-icon-show'>
																}
CSS classes for animations when showing a popup (fade in)
hideClass 
															
																{
																	popup: 'swal2-hide',
																	backdrop: 'swal2-backdrop-hide',
																	icon: 'swal2-icon-hide'>
																}
CSS classes for animations when hiding a popup (fade out)
footer '' The footer of the popup. Can be either plain text or HTML.
backdrop true Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop. Can be either a boolean or a string which will be assigned to the CSS background property.
toast false Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. Toasts are NEVER autofocused.
target 'body' The container element for adding popup into.
input undefined Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.
width '32em' Popup window width, including paddings (box-sizing: border-box). Can be in any CSS unit (px, em/rem, %).
padding '0 0 1.25em' Popup window padding. Can be in any CSS unit (px, em/rem, %).
color undefined Color for title, content and footer (CSS color property). The default color is '#545454'.
background undefined Popup window background (CSS background property). The default background is '#fff'.
position 'center' Popup window position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'.
grow false Paired with window position, sets the direction the popup should grow in, can be set to 'row', 'column', 'fullscreen', or false.
customClass undefined A custom CSS class for the popup: 
															
																customClass: {
																	container: '...',
																	popup: '...',
																	header: '...',
																	title: '...',
																	closeButton: '...',
																	icon: '...',
																	image: '...',
																	htmlContainer: '...',
																	input: '...',
																	inputLabel: '...',
																	validationMessage: '...',
																	actions: '...',
																	confirmButton: '...',
																	denyButton: '...',
																	cancelButton: '...',
																	loader: '...',
																	footer: '....',
																	timerProgressBar: '....',
																}
timer undefined Auto close timer of the popup
timerProgressBar false If set to true, the timer will have a progress bar at the bottom of a popup. Mostly, this feature is useful with toasts.
heightAuto true By default, SweetAlert2 sets html's and body's CSS height to auto !important. If this behavior isn't compatible with your project's layout, set heightAuto to false.
allowOutsideClick true If set to false, the user can't dismiss the popup by clicking outside it.
You can also pass a custom function returning a boolean value, e.g. if you want to disable outside clicks for the loading state of a popup.
allowEscapeKey true If set to false, the user can't dismiss the popup by pressing the Esc key. You can also pass a custom function returning a boolean value, e.g. if you want to disable the Esc key for the loading state of a popup.
allowEnterKey true If set to false, the user can't confirm the popup by pressing the Enter or Space keys, unless they manually focus the confirm button. You can also pass a custom function returning a boolean value.
stopKeydownPropagation true If set to false, SweetAlert2 will allow keydown events propagation to the document.
keydownListenerCapture false Useful for those who are using SweetAlert2 along with Bootstrap modals. By default keydownListenerCapture is false which means when a user hits Esc, both SweetAlert2 and Bootstrap modals will be closed. Set keydownListenerCapture to true to fix that behavior.
showConfirmButton true If set to false, a "Confirm"-button will not be shown.
showDenyButton false If set to true, a "Deny"-button will be shown. It can be useful when you want a popup with 3 buttons.
showCancelButton false If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.
confirmButtonText 'OK' Use this to change the text on the "Confirm"-button.
denyButtonText 'No' Use this to change the text on the "Deny"-button.
cancelButtonText 'Cancel' Use this to change the text on the "Cancel"-button.
confirmButtonColor undefined Use this to change the background color of the "Confirm"-button. The default color is #3085d6
denyButtonColor undefined Use this to change the background color of the "Deny"-button. The default color is #dd6b55
cancelButtonColor undefined Use this to change the background color of the "Cancel"-button. The default color is #aaa
confirmButtonAriaLabel '' Use this to change the aria-label for the "Confirm"-button.
denyButtonAriaLabel '' Use this to change the aria-label for the "Deny"-button.
cancelButtonAriaLabel '' Use this to change the aria-label for the "Cancel"-button.
buttonsStyling true Apply default styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false.
reverseButtons false Set to true if you want to invert default buttons positions ("Confirm"-button on the right side).
focusConfirm true Set to false if you want to focus the first element in tab order instead of "Confirm"-button by default.
returnFocus true Set to false if you don't want to return the focus to the element that invoked the modal after the modal is closed.
focusDeny false Set to true if you want to focus the "Deny"-button by default.
focusCancel false Set to true if you want to focus the "Cancel"-button by default.
showCloseButton false Set to true to show close button in top right corner of the popup.
closeButtonHtml '&times;' Use this to change the content of the close button.
closeButtonAriaLabel 'Close this dialog' Use this to change the aria-label for the close button.
loaderHtml '' Use this to change the HTML content of the loader.
showLoaderOnConfirm false Set to true to disable buttons and show the loader instead of the Confirm button. Use it in combination with the preConfirm parameter.
showLoaderOnDeny false Set to true to disable buttons and show the loader instead of the Deny button. Use it in combination with the preDeny parameter.
scrollbarPadding true Set to false to disable body padding adjustment when the page scrollbar gets hidden while the popup is shown
preConfirm undefined Function to execute before confirming, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
preDeny undefined Function to execute before denying, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
returnInputValueOnDeny false If you want to return the input value as result.value when denying the popup, set to true. Otherwise, the denying will set result.value to false.
imageUrl undefined Add a customized icon for the popup. Should contain a string with the path or URL to the image.
imageWidth undefined If imageUrl is set, you can specify imageWidth to describes image width. Can be in any CSS unit (px, em/rem, %).
imageHeight undefined Custom image height. Can be in any CSS unit (px, em/rem, %).
imageAlt '' An alternative text for the custom image icon.
inputLabel '' Input field label.
inputPlaceholder '' Input field placeholder.
inputValue '' Input field initial value.

If the input type is select, inputValue will represent the selected <option> tag.

If the input type is checkbox, inputValue will represent the checked state.

If the input type is text, email, number, tel or textarea a Promise can be accepted as inputValue.
inputOptions {} If input parameter is set to "select" or "radio", you can provide options. Can be a Map or a plain object, with keys that represent option values and values that represent option text. You can also provide plain object or Map as values that will represented a group of options, being the label of this <optgroup> the key. Finally, you can also provide a Promise that resolves with one of those types.
inputAutoTrim true Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.
inputAttributes {} HTML input attributes (e.g. min, max, autocomplete, accept), that are added to the input field. Object keys will represent attributes names, object values will represent attributes values.
inputValidator undefined Validator for input field, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • a falsy value (undefined, null, false) for indicating success
  • a string value (error message) for indicating failure
validationMessage undefined A custom validation message for default validators (email, url).
progressSteps [] Progress steps, useful for queues.
currentProgressStep undefined Current active progress step.
progressStepsDistance undefined Distance between progress steps. Can be in any CSS unit (px, em/rem, %).
willOpen undefined Popup lifecycle hook. Synchronously runs before the popup is shown on screen. Provides popup DOM element as the argument.
didOpen undefined Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument.
didRender undefined Popup lifecycle hook. Synchronously runs after the popup DOM has been updated (ie. just before the popup is repainted on the screen).
Provides popup DOM element as the argument.
Typically, this will happen after Swal.fire() or Swal.update().
If you want to perform changes in the popup's DOM, that survive Swal.update(), prefer didRender over willOpen.
willClose undefined Popup lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup being fired). Provides popup DOM element as the argument.
didClose undefined Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired).
didDestroy undefined Popup lifecycle hook. Synchronously runs after popup has been destroyed either by user interaction or by another popup.
If you have cleanup operations that you need to reliably execute each time a popup is closed, prefer didDestroy over didClose.

Plugin methods

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

Method Description
Swal.isVisible() Determine if popup is shown.
Swal.mixin({ ...options }) Returns an extended version of Swal containing params as defaults. Useful for reusing Swal configuration.
Swal.update({ ...options }) Updates popup options.
Swal.close() Close the currently open SweetAlert2 popup programmatically, the Promise returned by Swal.fire() will be resolved with an empty object { }
Swal.getContainer() Get the popup container which contains the backdrop and the popup itself.
Swal.getTitle() Get the popup title.
Swal.getProgressSteps() Get the progress steps.
Swal.getCloseButton() Get the close button.
Swal.getIcon() Get the icon.
Swal.getHtmlContainer() Gets the DOM element where the html/text parameter is rendered to.
Swal.getImage() Get the image.
Swal.getActions() Get the actions block (buttons container).
Swal.getFooter() Get the popup footer.
Swal.getFocusableElements() Get all focusable elements in the popup.
Swal.getConfirmButton() Get the "Confirm" button.
Swal.getDenyButton() Get the "Deny" button.
Swal.getCancelButton() Get the "Cancel" button.
Swal.enableButtons() Enable "Confirm" and "Cancel" buttons.
Swal.disableButtons() Disable "Confirm" and "Cancel" buttons.
Swal.showLoading() Shows loader (spinner), this is useful with AJAX requests.

By default the loader be shown instead of the "Confirm" button, but if you want another button to be replaced with a loader, just pass it like this: Swal.showLoading(Swal.getDenyButton())
Swal.hideLoading() Hides loader and shows back the button which was hidden by .showLoading()
Swal.isLoading() Determine if popup is in the loading state. Related methods: Swal.showLoading() and Swal.hideLoading()
Swal.getTimerLeft() Returns the time left in case when timer parameter is set.
Swal.stopTimer() Stops the timer in case when timer parameter is set. Returns the time left
Swal.resumeTimer() Resume the timer previously stopped. Returns the time left
Swal.toggleTimer() Toggle state of the timer between stopped and running. Returns the time left
Swal.isTimerRunning() Returns the status of a timer: true if is running, false if it's paused
Swal.increaseTimer(n) Increase the timer by n milliseconds. Returns the time left
Swal.clickConfirm() Click the "Confirm"-button programmatically.
Swal.clickDeny() Click the "Deny"-button programmatically.
Swal.clickCancel() Click the "Cancel"-button programmatically.
Swal.getInput() Get the input DOM node, this method works with input parameter.
Swal.disableInput() Disable input. A disabled input element is unusable and un-clickable.
Swal.enableInput() Enable input.
Swal.showValidationMessage(message) Show the validation message DOM node.
Swal.resetValidationMessage() Hide the validation message DOM node.
Swal.getValidationMessage() Get the validation message DOM node.
Swal.isValidParameter(param) Determine if parameter name is valid.
Swal.isUpdatableParameter(param) Determine if parameter name is valid for Swal.update() method.

Plugin info

Property Description
File name sweet_alert.min.js
Location assets/js/vendor/notifications/
Links

Official plugin website

Github project page
On this page
© 2022 Limitless Web App Kit