jQuery alertX Plugin BootstrapTema

A jQuery-powered custom Alert, Confirm and Prompt plugin that replaces the default browser dialog boxes with enhanced versions.

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:

$.alertX({
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: 

$.alertX({
message:'This alert opened with bounce animation. Same animation will apply in reverse mode when closing the alertX.',
title:'bounce animation example',
animation:'bounce'
});
  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. 

$.alertX({
message:'This alert opened with glass theme. You may develop your own theme or download more from our website.',
title:'glass theme example',
theme:'glass'
});
  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. 

$.alertX({
message:'This alert opened with success icon. These may come handy to represent various situations.',
title:'success icon example',
icon:'success'
});
  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 
$.alertX({
message:'This alertX have teal colored title and backdrop color.',
title:'teal color class example',
titleClass:'teal',
bgClass:'teal'
});

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

$.alertX({
message:'This is the message.',
title:'Backdrop options example',
bg:true,
bgpic:false,
bgblur:true
});
  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

$.alertX({
message:'Are you sure?',
title:'Please confirm...',
type:'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: 

$.alertX({
message:'This box should be aligned as per the link you had clicked.',
title:'Alignment preview',
Yalign:'start',
Xalign:'end'
});


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:

$.alertX({
message:'This is a notification message. It disappears in 15 seconds.',
Yalign:'center',
Xalign:'center',
theme:'neon',
timeout:15000,
bgblur:false,
type:'notify'
});

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

$.alertX({
message:'Can you see my name in footer near button area?',
title:'Footer text example...',
footer:'Satish Kumar Sharma'
});