A NICE JAVASCRIPT MESSAGE

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

If you open noty-2.3.8/themes/default.js file you can modify the message properties.

header code

Display an Ugly Alert

Display a Nice Message

JavaScript Code


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'
   });
}

HTML code

html code