Demo & Documentation for jQuery plugin alertX

alertX is a jQuery powered alert, confirm and prompt replacement with modern look and feel. It is completely free for you to use anywhere without the need of any kind of permission as it is released under MIT licence.

To see the alertX in action right now, with all its default settings, you may click here. You need only this line in your javascript:

$.alertX({message:'This is the message.'});

To change the title part, you can set title property. For preview click here. Code sample:

title:'My own title here',
message:'This is the message.'

There are many animations availiable, you may click any link to see it in action. Code sample:

message:'This alert opened with bounce animation. Same animation will apply in reverse mode when closing the alertX.',
title:'bounce animation example',
  1. alertX with none animation (DEFAULT)
  2. alertX with fade animation
  3. alertX with fall animation
  4. alertX with rise animation
  5. alertX with bounce animation
  6. alertX with zoomin animation
  7. alertX with zoomout animation
  8. alertX with shake animation

There are many themes availiable, you may click any link to see a theme in action.

message:'This alert opened with glass theme. You may develop your own theme or download more from our website.',
title:'glass theme example',
  1. alertX with simple theme (DEFAULT)
  2. alertX with dark theme
  3. alertX with letter theme
  4. alertX with glass theme
  5. alertX with neon theme

There are some action icons availiable, you may click any link to see an icon preview.

message:'This alert opened with success icon. These may come handy to represent various situations.',
title:'success icon example',
  1. alertX with info icon
  2. alertX with danger icon
  3. alertX with success icon
  4. alertX with warning icon
  5. alertX with question icon

There are some color classes that you may find useful with buttons, backdrop and title color. Button HTML code sample:

<a href="#" class="alertx-btn red">Red Button</a>
Click any button below for preview. Code sample is below buttons:

red green teal pink brown blue purple gold orange
message:'This alertX have teal colored title and backdrop color.',
title:'teal color class example',

Backdrop have 3 properties that can be true or false. Code sample:

message:'This is the message.',
title:'Backdrop options example',
  1. Disable only image on backdrop
  2. Disable only blur effect on backdrop
  3. Disable backdrop, but keep blur effect
  4. Disable backdrop and blur effect

Confirm dialogs can also be made using this plugin. See demo

message:'Are you sure?',
title:'Please confirm...',
confirmed:function(){ $.alertX('You confirmed it!'); },
cancelled:function(){ $.alertX('You cancelled it!'); }

You can make use of Xalign and Yalign options to control the position of alertX. Code sample:

message:'This box should be aligned as per the link you had clicked.',
title:'Alignment preview',

Values can be start, center or end on both options. You can test preview below:

You can run multiple instances at once. View demo here

You can use it for notification also. You can also set timeout for it. View demo here. Code sample:

message:'This is a notification message. It disappears in 15 seconds.',

Sometimes, you may need multiple action buttons OR want some information to be displayed in footer part of alertX. Code sample:

message:'Can you see my name in footer near button area?',
title:'Footer text example...',
footer:'Satish Kumar Sharma'

You may refer to the table below for complete list of options :

option values description
message "string" Your message within quotes.
Example : "Hello world."
title "string" Your title within quotes.
Example : "Important Notice"
Default : "Message from server"
theme "simple", "letter", "glass",
"dark", "neon"
Your chosen theme name within quotes.
Example : "glass"
Default : "simple"
animation "none", "fade", "zoomin", "zoomout", "fall", "rise", "bounce", "shake" Your chosen animation name within quotes.
Example : "zoomout"
Default : "none"
close_anim true, false Whether display animation while closing the alertX
Default : true
icon "none", "question", "info", "warning", "success", "danger" Display icon with your message.
Example : "warning "
Default : "none"
footer "properly escaped HTML content" Adds HTML content to footer.
Example : "<b>God</b> is great"
Default : ""
Xalign "start", "center", "end" Aligns alertX on X-axis
Example : "end"
Default : "center"
Yalign "start", "center", "end" Aligns alertX on Y-axis
Example : "end"
Default : "center"
titleClass "your-defined-css-class" Adds css class to title area of alertX
Example : "red"
Default : ""
bgClass "your-defined-css-class" Adds css class to title area of alertX
Example : "purple"
Default : ""
bg true, false Whether display backdrop behind alertX box
Default :true
bgpic true, false Whether display backdrop image behind alertX box
Default :true
bgblur true, false Whether to blur the page background when alertX is open
Default :true
type "alert", "confirm", "notify" Switches alertX to different modes.
Example : If "confirm" is used, confirmation box will appear instead of alert box
Default : "alert"
(works only when type:"confirm")
function() {
// your code here
Run a custom made function when someone confirms the confirm box.
Example :
$.alertX('You confirmed it!');
(works only when type:"confirm")
function() {
// your code here
Run a custom made function when someone cancelled the confirm box.
Example :
$.alertX('You cancelled it!');
onClose function() {
// your code here
Run a custom made function when alertX is
Example :
$.alertX('You closed it!');
(works only when type:" notify")
number Time in ms(1sec=1000ms), after which alertx notify widget will close automatically.
Example : 6000
Default : 10000
A product of