Customizable jQuery Modal Dialog Plugin with CSS3 Animations - jAlert

File Size: 2.6 MB
Views Total: 14790
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.css in the head section of the document.

<link href="src/jAlert.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.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

// confirm dialog
}, function(){

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

  // options

// or

  // triggered by a button

6. Full options with default values.

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

//By default we specify as false. You can add secound
'autoClose' : 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;



  • Fix toggleFocusTrap() call locations

v4.9.1 (2019-07-26)

  • Cleanup some CSS stuff, improve iframe full height, improve image fullscreen

v4.8.0 & v4.7.0 (2019-07-10)

  • Added confirm question as the third param of the confirm() method
  • Accepts dom element for content (it'll grab the html automatically)
  • Button onClick method now receives 3 params e, btn, alert (so you can quickly alert.closeAlert())
  • When you open an image alert using the image param, it will now shrink the popup to fit the image size if it's smaller and disables alert padding

v4.6.5 (2018-08-23)

  • fix inability to scroll


  • Bugfix


  • 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


  • v4


  • 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 HTMLGuyLLC. For more Advanced Usages, please check the demo page or visit the official website.