🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

alertable.js is a very small (~2kb) jQuery plugin that lets you create nice, clean, animated, fullscreen alert or confirmation dialog popups.

alert confirm popup Dialog prompt

Documentation

jquery.alertable.js - Minimal alert, confirm, and prompt replacements.

Developed by Cory LaViska for A Beautiful Site, LLC

Licensed under the MIT license: http://opensource.org/licenses/MIT

Overview:

This plugin provides a minimal, lightweight, and customizable alternative to window.alert(), window.confirm(), and window.prompt(). It's flexible enough to mold to your application's existing stylesheet and markup.

Features:

  • Simple syntax:
    • $.alertable.alert('Howdy!')
    • $.alertable.confirm('You sure?').then(function() { ... })
    • $.alertable.prompt('How many?').then(function(data) { ... })
  • Minimal default styles; easy to customize or write your own.
  • Show/hide hooks for adding custom animation (works well with Velocity.js).
  • Prevents focus from leaving the modal.
  • Returns promise-compatible (jQuery deferred) for ok/cancel actions.
  • Compact! (about 180 lines)

Demo

A quick demo can be found on CodePen: http://codepen.io/claviska/pen/mPNWxy

A local demo can be found in example.html.

Installing

Include the minified version of this plugin in your project or install via NPM:

npm install --save @claviska/jquery-alertable 

Using the plugin

Example alerts:

// Basic example $.alertable.alert('Howdy!');  // Example with action when the modal is dismissed $.alertable.alert('Howdy!').always(function() {   // Modal was dismissed });

Example confirmations:

// Basic example $.alertable.confirm('You sure?').then(function() {   // OK was selected });  // Example with then/always $.alertable.confirm('You sure?').then(function() {   // OK was selected }, function() {   // Cancel was selected }).always(function() {   // Modal was dismissed });

Example prompts:

// Basic example $.alertable.prompt('How many?').then(function(data) {   // Prompt was submitted });  // Example with then/always $.alertable.prompt('How many?').then(function(data) {   // Prompt was submitted }, function() {   // Prompt was canceled }).always(function() {   // Modal was dismissed });

Important: Unlike window.alert(), window.confirm(), and window.prompt(), using this plugin will not cause execution of the script to stop while the modal is open. This behavior is not possible to emulate with a plugin nor is it desirable in modern web applications.

Options

Pass options as the second argument of any method:

$.alertable.alert('Howdy!', {   optionName: optionValue,   ... });  $.alertable.confirm('You sure?', {   optionName: optionValue,   ... });  $.alertable.prompt('How many?', {   optionName: optionValue,   ... });

Available options:

  • container: The container to append the modal to. Defaults to 'body'.

  • html: Whether or not your message contains HTML. Defaults to false.

  • cancelButton: HTML to use for the reject button. Default value:

<button class="alertable-cancel" type="button">Cancel</button>
  • okButton: HTML to use for the resolve button. Default value:
<button class="alertable-ok" type="button">OK</button>
  • overlay: HTML to use for the overlay. Default value:
<div class="alertable-overlay"></div>
  • prompt: HTML to use for the prompt body. All inputs contained in this HTML will be serialized and returned when the prompt is submitted. Default value:
<input class="alertable-input" type="text" name="value">
  • modal: HTML to use for the modal. Default value:
<form class="alertable">   <div class="alertable-message"></div>   <div class="alertable-prompt"></div>   <div class="alertable-buttons"></div> </form>
  • hide: Function for hiding the modal and overlay. Use this.modal and this.overlay to reference the modal and overlay elements. Default value:
$(this.modal).add(this.overlay).fadeOut(100);
  • show: Function for showing the modal and overlay. Use this.modal and this.overlay to reference the modal and overlay elements. Default value:
$(this.modal).add(this.overlay).fadeIn(100);

You may also update the default options before calling either method:

$.alertable.defaults.optionName = yourValue;

Promises

All methods return a promise-compatible (jQuery-deferred) object. As a result, you can use any of the supported chainable methods. However, the examples above demonstrate the most appropriate ones to use.


You May Also Like