Tweet

prettyAlert.js

By Jacques Vrolijk

A jQuery plugin that allows you to quickly notify the user of something without resorting to (ugly) Javascript alert boxes.

Download Plugin


You simply include the prettyalert.js and prettyalert.css files in your page and then call the prettyAlert function
as shown below:

		$.prettyAlert({
    message: 'This is your message!'
});

Example One

Additionally, you can specify several options:

		$.prettyAlert({
    message: 'Hello user! Please enter your First Name!',
    top: '200px',
    width: '600px',
    borderWidth: '10px',
    borderOpacity: '0.6',
    background: '#ffffff',
    overlay: '0.1',
    pauseTime: '3000'
});

Example Two

And if you want to completely change the style of the prettyAlert box, you can dig right into the prettyalert.css
stylesheet or override these default styles in your own stylesheet.

Example of how and when you'd call a prettyAlert:

		$('.sendEmailBtn').click(function() {

    if(emailField == ''){

        $.prettyAlert({
            message: 'Please enter your Email Address.',
        });

    } else {
        sendEmail();
    }
});


Download Plugin