Web programming TipsBy Sergey Skudaev
JavaScript Alert message does not look great!. With the noty.js JavaScript liberary you can display a nice message.
Click the "Display an Ugly Alert" button and see a simple JavaScript. Click the "Display a Nice Message" button and you will see a nice message that will close nicely after set time.
To use noty.js you have to include noty.js and Jquery reference to you web page between <head> and </head> tags as in the picture below.
For animation, you have include Animate.css.
You can download noty library here and the whole source code for this page here or you can sign up for my email list on the form below and download the whole website source code that includes the noty.js messaging system.
If you open noty-2.3.8/themes/default.js file you can modify the message properties.
function display_alert()
{
var text="JavaScript alert message!";
alert(text);
}
function display_nice_message()
{
var text="A nice JavaScript message!";
noty({
text: text,
layout: 'center',
animation: {
open: 'animated flipInX', // Animate.css class names
close: 'animated flipOutX', // Animate.css class names
easing: 'swing', // unavailable - no need
speed: 500 // unavailable - no need
},
//closeWith: ['click'],
timeout: 2500,
type: 'success'
});
}
