Flashing Alert Message Box using JQuery

As you can see in the poll running on this blog, jQuery is leading among the other JavaScript framework by a good margin. And, this blogger is also a great fan of jQuery.This time, I’ve come up with another tutorial of jquery. In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser using jQuery. This alert box gets displayed with animation when the page is loaded for the first time.

Live Demo

Let’s start looking at the HTML, CSS and JavaScript Code in jquery to make the animated alerting message box using jQuery.

HTML code for Flashing Alert Message using jQuery

<div id="object" class="message">
  <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
  <strong>Massive Offer </strong>
  <p>The detail of this offer goes here dude just Grab this offer !!!!!!! </p>

As you the message box which I want to display is inside the “div” element with id “object”. And there is an image inside of this box with id “close_window”, when this image is clicked the message box gets vanished with fading effect.

CSS code for Flashing Alert Message Box using jQuery

border:1px solid #CCCCCC;
border:1px solid #c93;
top : -170px;

As you know, I’m very poor in selecting good colors, please forgive me for the bad design of the alert box.

Above is the class which I’ve used for flashing message box. The position property must be “absolute” and the top property should be choosen such a way that the message box gets hidden in the top part of the browser. The other part property of CSS is straightforward you can change them according to your need.

JavaScript code in jQuery for Flashing Alert Message Box

  //first slide down and blink the message box
  top: "0px"
  }, 2000 ).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);

  //close the message box when cross red image is clicked

As you know, we’ve placed the message box in the top of the browser in such a way that it is not visible in the browsers. Now, the above jQuery code is used this message box to get slide down and gets flashed in the browser. For this, I’ve used animate() and fadeOut() and fadeIn() functions of jQuery.

And, when the close image of the message box is clicked, the alert box gets vanished with the fading effect.

Download Full Source Code

12 thoughts on “Flashing Alert Message Box using JQuery

  1. I think you missed the side… the box appears on the left top side… on MOZ-3

  2. Christoph

    Same thing in Firefox 2, left top 😉

  3. It is in the top left corner in any browser guyz sorry for the misunderstanding in the demo page…Thanks to subesh and Christoph for having the close look

    But, it is mentioned in the first paragraph of this post….

    “In this post I’ll show you how to make sliding and flashing alert box in top left corner of the browser”

  4. Why not just use jquery growl? It’s far better.

  5. @Jason – There is no doubt that jQuery growl is much better than this example. Growl is a nice jquery plugin and this is just a example to show you how can we use pure jquery to populate the alert message box…

  6. dami. I will use it in my portfolio n best of luck Roshan dai, ur blog is amazing. subscribe garchu!

  7. Bill

    I’m not able to get this to work in a WordPress theme? The JavaScript loads and so does the alert bar, but the close function does not work. Any suggestions? Thanks!

  8. what are the codes in making our own websites..?


  9. Wilson

    Very nice post.


  10. anand

    i used this script as html/javascript widget in my blog, its nice but iam not able to close the message box. how can i add this script as html/javascript widget in blogger.

  11. sunil

    I want to display message that automatically fade away after some time

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>