Customizable jQuery Modal Dialog Plugin with CSS3 Animations - jAlert

Customizable jQuery Modal Dialog Plugin with CSS3 Animations - jAlert

jAlert is a simple yet feature-rich jQuery plugin used to create fully configurable modals, dialogs and popups with cool CSS3 animations powered by animate.css.


  • Responsive design.
  • Replaces the default alert / prompt / confirm dialog boxes.
  • 6 predefined sizes & themes.
  • AJAX, images, iframes and videos supported.

Basic usage:

1. Load the required stylesheet jAlert-v3.css in the head section of the document.

<link href="src/jAlert-v3.css" rel="stylesheet">

2. Load the animate.css for amazing CSS3 animations.

<link rel="stylesheet" href="//">

3. Load jQuery library and other required JS files at the bottom of the document.

<script src="//"></script>
<script src="src/jAlert-v3.js"></script>
<script src="src/jAlert-functions.js"></script>

4. Basic usage.

// default alert popup 
alert('Hello World!');
// success
successAlert('Success', 'Hello World!');
// error
errorAlert('Error', 'Hello World!');
// info
infoAlert('Info', 'Hello World!'); 
// warning
warningAlert('Warning', 'Hello World!'); 
// black warning
blackAlert('Warning', 'Hello World!');
// image lightbox
// video lightbox
// ajax lightbox
// iframe lightbox

5. Default usage (Doesn't require jAlert-functions.js).

  // options
// or
  // triggered by a button

6. Full options.

//title for the popup (false = don't show)
'title': false, 
//html for the popup (replaced if you use image, ajax, or iframe)
'content': false, 
//remove padding from the body
'noPadContent': false, 
//make the jAlert completely fullscreen
'fullscreen': false, 
//adds a centered img tag
'image': false, 
//defaults to max-width: 100%; width: auto;
'imageWidth': 'auto', 
//adds a responsive iframe video - value is the "src" of the iframe
'video': false, 
//uses ajax call to get contents
'ajax': false, 
//callback for when ajax fails
'onAjaxFail': function(alert, errorThrown){ 
//uses iframe as content
'iframe': false, 
//string. height of the iframe within the popup (false = 90% of viewport height)
'iframeHeight': false, 
//adds a class to the jAlert (add as many as you want space delimited)
'class': '', 
//add classes to the jAlert (space delimited)
'classes': '', 
//adds an ID to the jAlert
'id': false, 
// see animate.css
'showAnimation': 'bounceIn',
'hideAnimation': 'bounceOut',
// approx duration of animation to wait until onClose
'animationTimeout': 600, 
// red, green, blue, black, default
'theme': 'default', 
//white, black
'backgroundColor': 'black', 
//blurs background elements
'blurBackground': false, 
//false = css default, xsm, sm, md, lg, xlg, full, { height: 200, width: 200 }
'size': false, 
//if there's already an open jAlert, remove it first
'replaceOtherAlerts': false, 
//close the alert when you click anywhere
'closeOnClick': false, 
//close the alert when you click the escape key
'closeOnEsc': true,
//adds a button to the top right of the alert that allows you to close it
'closeBtn': true, 
//alternative close button
'closeBtnAlt': false, 
//alternative round close button
'closeBtnRound': true, 
//alternative round close button (in white)
'closeBtnRoundWhite': false, 
//adds buttons to the popup at the bottom. Pass an object for a single button, or an object of objects for many
'btns': false, 
  Variety of buttons you could create (also, an example of how to pass the object
  'btns': [
    {'text':'Open in new window', 'closeAlert':false, 'href': '', 'target':'_new'},
    {'text':'Cool, close this alert', 'theme': 'blue', 'closeAlert':true},
    {'text':'Buy Now', 'closeAlert':true, 'theme': 'green', 'onClick': function(){ console.log('You bought it!'); } },
    {'text':'I do not want it', 'closeAlert': true, 'theme': 'red', 'onClick': function(){ console.log('Did not want it'); } },
    {'text':'DOA', 'closeAlert': true, 'theme': 'black', 'onClick': function(){ console.log('Dead on arrival'); } }
//adds optional background to btns
'btnBackground': true, 
//pass a selector to autofocus on it
'autofocus': false, 
//on open call back. Fires just after the alert has finished rendering
'onOpen': function(alert){ 
  return false;
//fires when you close the alert
'onClose': function(alert){ 
  return false;
//modal, confirm, tooltip
'type': 'modal', 
/* The following only applies when type == 'confirm' */
'confirmQuestion': 'Are you sure?',
'confirmBtnText': 'Yes',
'denyBtnText': 'No',
'confirmAutofocus': '.confirmBtn', //confirmBtn or denyBtn
'onConfirm': function(e, btn){
  return false;
'onDeny': function(e, btn){
  return false;

Change logs:


  • add fullscreen: true/false + tiny adjustment to red alternative close button padding


  • fix dupe button callbacks, add dist folder, autocompile hook instructions, bump version to 4.5


  • added box-shadow back to improve look of white background


  • fix for height



  • added dark colors and adjusted each shade


  • adjust round close button


  • added new round button as option, remove borders


  • Fixed or IE8


  • fixed alert variable overriding function.


  • fixed alert variable overriding function.


  • fix for alert.each


  • enhancement: remove focus from the element that initiated the alert
  • options were being overriden by each new alert


  • Compatibility of for IE8 and 7, opacity of backgrounds in IE8 and 7


  • fix for ie10 iframe


  • Changed default animation to fade.


  • .off fix


  • Fixed on scrolling tall alert, background wasn't position: fixed


  • Fixed body overflow hidden bug

This awesome jQuery plugin is developed by VersatilityWerks. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 09.08.2018
  • Source