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:
$.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'
});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'
});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'
});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>$.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
});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'
});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'
});
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" |
| confirmed (works only when type:"confirm") |
function() { // your code here } |
Run a custom made function when someone confirms the confirm box. Example : confirmed:function(){ $.alertX('You confirmed it!'); } |
| cancelled (works only when type:"confirm") |
function() { // your code here } |
Run a custom made function when someone cancelled the confirm box. Example : cancelled:function(){ $.alertX('You cancelled it!'); } |
| onClose | function() { // your code here } |
Run a custom made function when alertX is closed. Example : onClose:function(){ $.alertX('You closed it!'); } |
| timeout (works only when type:" notify") |
number | Time in ms(1sec=1000ms), after which alertx notify widget will close automatically. Example : 6000 Default : 10000 |