The BEST jQuery Modal, Alert, Popup, Lightbox Plugin

jAlert is really easy, and really powerful! See why below:

Plenty-o Sizes

Completely responsive (just under full width on small screens), but for tablets and desktops, you have a lot of control over how large the alert is.

xsm sm md lg xlg full auto 20% 600px {'height':'100px', 'width':'300px'} {'height':'400px', 'width':'300px'}

Sweet Themes

When used correctly, a user may not even need to read your message to know what it pertains to. Red alert = error. Green = success. You can use the default black background, or optional white one.

default red dark_red green dark_green blue dark_blue yellow brown gray dark_gray black
default red dark_red green dark_green blue dark_blue yellow brown gray dark_gray black

Responsive Lightbox(es)

Need to show a video, image, iframe, or something fetched via AJAX? It's dead-simple and beautiful using jAlert:

Image Image no Pad Video Video no Pad iFrame iFrame no Pad iFrame fullscreen, no Pad AJAX

Blurred Background

Popup an alert and blur all the background elements:

Image

CSS Animations

In version 3, Animate.css was integrated.

default fade bounce flip x flip y zoom

These are just a few. Checkout Animate.css for the full list (must choose ones that hide/show the element).

Closing Options

When it comes to closing jAlert, you have a few options (all of which can be disabled)

top-right btn alt esc key anywhere auto none

Buttons

Additionally: With or without the background (btnBackground: boolean)

default red green blue black
default red green blue black

Confirmation

In version 3, a confirmation was added with callbacks for onConfirm and onDeny.

confirm

Easy Callbacks

There are callbacks for: alert "onOpen", alert "onClose", alert "onAjaxFail", and btn "onClick".

onOpen onClose onAjaxFail onClick

MIT Licensed

Go ahead and use jAlert in any commercial project you'd like. Just leave the MIT license intact to give credit where credit's due. If you really like jAlert, consider buying me a new car! (or like...a beer or something..) Thank you in advance!

Donations are appreciated (via PayPal)


Examples & Use-Cases

Instead of just giving you more of what's on the homepage, here are some advanced examples and use-cases that show how you can take full advantage of jAlert's functionality to build awesome apps.

Shortcut Functions (requires jAlert-functions.js)

alert('For your info...', '...you rock!');
alert('...you rock!'); //default is to not display a title
Need to show a success message?
successAlert('Success!', 'Saved your profile.');
successAlert('Saved your profile.'); //default title is Success
How about an error?
errorAlert('Error!', 'Could not save your profile.');
errorAlert('Could not save your profile.'); //default title is Error
Info anyone?
infoAlert('Info', 'I like your shirt.');
infoAlert('I like your shirt.'); //default title is Info
Warning?
warningAlert('Warning', 'Your shirt is not yellow!');
warningAlert('Your shirt is not yellow!'); //default title is Warning
Black (like your ex wife's heart)
blackAlert('Warning', 'It\'s still got that new car smell.');
blackAlert('It\'s still got that new car smell.'); //default title is Warning
Confirmation anyone?
confirm(function(e,btn){ //event + button clicked
    e.preventDefault();
    successAlert('Confirmed!');
}, function(e,btn){
    e.preventDefault();
    errorAlert('Denied!');
});
errorAlert('Could not save your profile.'); //default title is Error!

Link Css

Move the plugin CSS file to your server and link to it in the head section of your document.

<link rel="stylesheet" href="jAlert-master/dist/jAlert.css" />

Link JS

Move the plugin JS file to your server and link to it before the closing body tag.

Please note that you must include jQuery (v1.7 or later) before the jAlert JS file.

<script src="jquery-1.7.1.min.js"></script>
<script src="jAlert-master/dist/jAlert.min.js"></script>
<script src="jAlert-master/dist/jAlert-functions.min.js"> //optional!!</script>

Call Plugin

Just before the closing body tag (after any JS file includes), call the plugin with code below:

<script>
$(document).ready(function () {
      $.jAlert({
        'title': 'It works!',
        'content': 'YAY!',
        'theme': 'green',
        'btns': { 'text': 'close' }
      });
});
</script>

To use "data-jAlert" attributes to toggle jAlerts, use the attach function

This means you can add a button like this: <a href='#' data-jAlert data-title='Hi' data-content='I opened!'>Click me</a>

<script>
$(document).ready(function () {
    $.jAlert('attach');
});
</script>
Warning! The attach function binds to the current DOM. If you add elements dynamically, you must run attach again!

jAlert Settings

How to set options when calling jAlert:
$.jAlert({
  'title': 'Set It',
  'content': 'Set',
  'theme': 'green',
  'size': 'md',
  'showAnimation': 'fadeInUp',
  'hideAnimation': 'fadeOutDown'
});
If you're using the data-jAlert attributes (every options can be set this way, however, some (like callbacks) may not work):
<a href='#' data-jAlert data-title="Set It" data-content="Set" data-theme="green" data-size="md" data-showAnimation="fadeInUp" data-hideAnimation="fadeOutDown">
   Click Me
</a>
How to get the current top-most visible jAlert:
var currentAlert = $.jAlert('current');
//now that you've got it, you can get it's properties, or close it.
console.log(currentAlert);
currentAlert.closeAlert();
How to override defaults:
$.fn.jAlert.defaults.size = 'lg';
$.fn.jAlert.defaults.theme = 'blue';
$.fn.jAlert.defaults.showAnimation = 'fadeInUp';
$.fn.jAlert.defaults.hideAnimation = 'fadeOutDown';
Full list of available options
Property Default Options Description
title false string, false This is the title of the modal. If false, a title bar isn't shown.
content false string, false Content is ignored if you're using image, iframe, ajax, or video. If content is false and you don't provide one of those, an error will be console logged.
noPadContent false boolean By default, the content of an alert has padding. You may choose to remove this by setting this param to true. This is useful in situations where you want something like an Iframe to be the full size without padding.
fullscreen false boolean This option makes jAlert stretch to the full height and width of the current window. Useful for fullscreen iframes, images, or other content.
image false string (url), false Displays an image centered with a max-width: 100% (of the alert's width). Shows a loader until the image has loaded.
imageWidth 'auto' string (include % or px) Defines the width of the image. max-width is always 100%.
ajax false string (url), false Does a $.get request and puts the content in the alert. Shows a loader until the content has been put in the DOM. onOpen is called AFTER the content is retrieved.
onAjaxFail function(alert, errorThrown){ alert.closeAlert(); errorAlert(errorThrown); }; function What to do if the $.get request fails for ajax. Default closes the alert and displays the ajax error.
iframe false string (url), false Displays a full width iframe with no border. Show a loader until the iframe has loaded.
iframeHeight false string (px, %), false Controls the height of the iframe. False will calculate 90% of the viewport height.
class false string, false Comma delimited string of classes (or just one class). Will be added to div.jAlert
id false string, false Sets an ID for div.jAlert
showAnimation 'fadeInUp' string, false Controls how to animate the entrance of the alert. Uses Animate.css (included in the CSS file).
hideAnimation 'fadeOutDown' string, false Controls how to animate the closing of the alert. Uses Animate.css (included in the CSS file).
animationTimeout 500 int Approx. how long the hide/show animation takes so that the background can wait and then hide. Since the animation is in CSS, there is no callback to rely on. If you change the animation speed in the CSS, you should change this to match.
theme 'default' string ('default', 'red', 'dark_red', 'green',' dark_green', 'blue', 'dark_blue', 'brown', 'gray', 'dark_gray', 'black') Controls the color of the title background, the border of the entire alert, and the font color of the title.
backgroundColor 'black' string ('black', 'white') Controls the color of the background behind the alert (the color that covers up the rest of the page).
blurBackground false boolean Blurs all elements behind the alert.
size (width is an alias) 'sm' string ('xsm', 'xsmall', 'sm', 'small', 'md', 'medium', 'lg', 'large', 'xlg', 'xlarge', 'full', 'auto', {'height': '300px', 'width': '300px'}, 'npx', 'n%') If you need to know exact pixel sizes of each, they're in the CSS file. All sizes are max-width of just smaller than the viewport (aka..responsive). Auto adjusts to the size of the content. You can also pass an object with height and width OR just a width (px or %)
replaceOtherAlerts false boolean When opening an alert/this alert, should other alerts be removed first? (true = yes)
closeOnClick false boolean Whether or not to hide the alert when you click anywhere on the page (true = yes). This is disabled if you include buttons in your alert.
closeOnEsc true boolean Whether or not to hide the alert when you click the "esc" key (true = yes).
closeBtn true boolean Whether or not to show the close button in the top-right side of the alert (true = yes).
closeBtnRound true boolean Default. Makes the button round. Set to false for the old style.
closeBtnAlt false boolean Enables an alternative version of the top-right close button
btns false object, false You can include just one button object, or multiple by wrapping them in brackets. Example: [ {'text': 'close'}, {'text': 'close'} ]
A btn object can contain the following properties:
Property Default Options Description
text '' string Required. This is the label for the button
href '' string (url) Where the button should navigate to. Not required if you plan to use the onClick callback and do something else.
target '_self' string ('_self', '_blank', '_parent', etc) The target window/tab for the link to open in.
theme 'default' string ('default', 'red', 'green', 'blue', 'black') The color of the button, button border, font are controlled by this.
class '' string Comma delimited string of classes (or just one class). Will be added to the button.
closeAlert true boolean Whether or not to close the alert when you click the button.
onClick function Handle the onClick event. The function is passed 2 parameters, the first is the event and the second is the button.
btnBackground true boolean Whether or not to show the gray background behind the button(s).
autofocus false string (dom selector), false String should be an element within the alert that you would like autofocused onOpen (good for inputs and buttons).
onOpen function(alert){ return false; } function Function is called after the alert has finished opening. In the case of Ajax content, it's called after the content is loaded. The only parameter passed is a reference to the alert.
onClose function(alert){ return false; } function Function is called after the alert has closed. The only parameter passed is a reference to the alert.
type 'modal' string ('modal', 'confirm') A type: 'confirm' has magic that creates a standard confirmation popup.
confirmQuestion 'Are you sure?' string The question to ask when type: 'confirm'.
confirmBtnText 'Yes' string The confirmation button's text for type: 'confirm'.
denyBtnText 'No' string The deny button's text for type: 'confirm'.
confirmAutofocus '.confirmBtn' string ('.confirmBtn', '.denyBtn', dom selector) Autofocuses on the confirm button by default. You may pass any selector for a DOM element in the alert, or one of the two classes shown here. For type: 'confirm'.
onConfirm function(e, btn){ e.preventDefault(); console.log('confirmed'); return false; } function This callback is triggered when you click the confirmBtn. It's passed two parameters, the first is the event and the second is the button clicked. For type: 'confirm'.
onDeny function(alert){ return false; } function This callback is triggered when you click the denyBtn. It's passed two parameters, the first is the event and the second is the button clicked. For type: 'confirm'.

Public methods

Function Sample Params Description
closeAlert $('.jAlert').closeAlert(true, function(){ console.log('the alert is now closed'); }); OR $('.jAlert').jAlert().closeAlert(true, function(){ console.log('the alert is now closed'); }); destroyOrJustHide, onClose The first parameter determines whether or not to hide or remove from the DOM (boolean), and the second is a callback for when it's done closing.
showAlert $('.jAlert').jAlert().showAlert(); replaceOthers, removeOthers, onOpen, onClose Shows a hidden alert that was previously opened. replaceOthers will close all other alerts to show this one. removeOthers will remove the closed alerts before opening this one. onOpen and onClose are the same callbacks you can apply when instantiating a jAlert.

Roadmap

Version Description
5 Lightbox Slideshow

Changelog

  • Added alert margin to make sure the alt circle close button is visible
  • Fixed scroll issue with flex
  • Rewrote alert positioning to be flexbox
  • Removed centerAlert method
  • Fixed all links to new github username "HTMLGuyLLC" (prev: "VersatilityWerks").
  • Fixed all references to the version in the code to match
  • Fixed Codepen demos.
  • Fixed NPM.
  • Fixed top-margin when alert is larger than screen.
  • Fixed round close button default font color to stand out better.
  • Fixed autoclose option.
  • Added autoclose option.
  • Added fullscreen option.
  • Removed minified files from src folder.
  • Added distribution folder (dist).
  • Fixed duplicate button callbacks.
  • Removed Borders for no-title alerts and iframes.
  • Added Box-shadow back in.
  • Improved Comments to include exact version number.
  • Added noPadContent option.
  • Improved iFrame height handling.
  • Fixed Positioning so there is no longer an unnecessary scroll bar.
  • Added blurBackground option.
  • Improved The body will have overflow: hidden before the popup animated to prevent weird animation.
  • Fixed Body background will now stretch to match jAlert height (if set in size object).
  • Fixed $.jAlert('attach') was attaching the callback multiple times if run multiple times for dynamically added content.
  • Added the alias "color" for "theme".
  • Improved massive changes in 3.98 and entire backbone.
  • Added ability to pass "px" or "%" as size.
  • Added ability to pass an object with dimensions as size (ex: {height:'400px', width: '400px'}.
  • Added alias for size - "width".
  • Added alias for sizes - "sm" can now be called using "small".
  • Added ability to get current top-most jAlert using $.jAlert('current').
  • Added ability to access public methods and properties of jAlert calling .jAlert() on the opened alert (ex: $('.jAlert:visible:last').jAlert();).
  • Added data-jAlert data attribute option. Just use $.jAlert('attach') in your on dom ready function and create elements with data-jAlert. Clicking the element will open a jAlert with whatever options you provided via data attributes. (ex: >a href='#' data-jAlert data-title="Hi" data-content="Nice work!">Click Me>/a>
  • Added ability to get contents from an element using it's ID via the content option. Simply pass the ID selector as "content". (ex: content: "#mydiv").
  • Changed default jAlert font to Arial - remove from the CSS to allow your template's font to override.
  • Changed make the options case-insensitive.
  • Confirmed massive changes in 3.98 haven't added bugs. New release version.
  • Added "auto" size.
  • Added "gray", "brown", "dark_gray", "dark_red", "dark_blue" themes.
  • Changed default close button to a new round one.
  • Changed Now removes focus from focused element on open.
  • Changed flattened out the design.
  • Fixed options being overridden by the next alert that is opened.
  • Fixed IE7 compatibility.
  • Fixed .off bug. jAlert was removing all handlers instead of just it's own
  • Fixed tall alert background is now position: fixed.
  • Fixed body and fixed overflow: hidden bug.
  • Moved optional functions into their own file.
  • Added "yellow" theme.
  • Improved overlapping.
  • Removed z-index from javascript. It's now entirely dependent on the CSS.
  • Added imageWidth param.
  • Removed z-index plugin (because it had GLP license).
  • Removed debug mode (not necessary now that it's been fully tested).
  • Completely rebuilt
  • Changed default size to "sm".
  • Changed "message" param to "content". Seems to make more sense since it's HTML, not just a simple message.
  • Changed "clickAnywhere" param to "closeOnClick". In an attempt to keep things more uniform.
  • Changed "hideOnEsc" param to "closeOnEsc". (same as above)
  • Changed "btn" to "btns" so you can easily tell it allows multiple.
  • Changed "cssClass" param to "class" or "classes" to keep it simple.
  • Changed themes from "success", "error", "info" etc to "red", "green", "black", "default", and "blue". Hopefully this is easier.
  • Changed "iframeUrl", "ajaxUrl", and "imgUrl" to "iframe", "ajax", "image" to keep it simple.
  • Changed "label" to "text" in the button parameters.
  • Removed full name option for declaring size.
  • Added imageWidth param
  • Added animate.css so you can pick from a couple dozen animations
  • Added "video" param that displays a responsive video
  • Added more sizes (xsm, xlg).
  • Added a CSS loader to image, ajax, and iframe alerts before the content loads.
  • Added $.jAlert syntax so you only have to use $.fn.jAlert when interacting with existing alerts like $('.jAlert').closeAlert();
  • Added $.fn.jAlert.defaults object so you can easily override default settings.
  • Added numerous default settings.
  • Added "type" param with "confirm" option which automatically creates a confirmation popup.
  • Added optional "confirm()" function that overrides javascript's built in one. WARNING: Works differently and requires a callback be passed as a parameter.
  • Added "theme" to buttons - options are the same colors as 'theme' for jAlert.
  • Added "btnBackground" (boolean) param and background behind buttons.
  • Added $.alertOnClick(options) and $('.btn').alertOnClick(options)
  • Completely revamped documentation.
  • Completely rebuilt as a jQuery plugin.
  • Initial Release

License

Copyright (c) 2018 HTMLGuy, LLC

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.