jQuery Alert Message without using traditional javascript alert-box.

14 / Jun / 2010 by Salil 5 comments

This post might help you if you want to display alert messages without using tradition javascript (irritating) alert.
To achieve this you need jQuery for your frontend UI.

Below is the javascript method (code snapshot) which displays your message for 5 seconds. And then fades out automatically.

function displayAlertMessage(message) {
var timeOut = 5
jQuery('#messageBox').text(message).fadeIn()
jQuery('#messageBox').css("display", "block")
setTimeout(function() {
jQuery('#messageBox').fadeOut()
jQuery('#messageBox').css("display", "none")
}, timeOut * 1000);
}

messageBox is id of your div tag where you want to display the Alert Message.
timeOut is number of seconds you want to hold message on screen.
That’s it. So simple and quite comfortable from a user’s perspective Isn’t it? :-)

Cheers!!
Salil Kalia



FOUND THIS USEFUL? SHARE IT

comments (5)

  1. Barer

    Aporte incondicional en Web Free Mundial para todos los Usuarios. Milton Vega. L1f3H4ck3r. estudios en Private

    Reply
  2. Arne

    You’d better chain your jQuery commands, because a jQuery method always returns the object on which it is executed. So your code would look like this:

    function displayAlertMessage(message) {
    var timeOut = 5
    jQuery(‘#messageBox’).text(message).fadeIn().css(“display”, “block”);
    setTimeout(function() {
    jQuery(‘#messageBox’).fadeOut().css(“display”, “none”);
    }, timeOut * 1000);
    }

    Just my 2 cents ;)!

    Reply

Leave a comment -