Floating Message Box Using Jquery

Sometimes, we have to show some extra message in our post which are important and linked with the post and cannot put that in the webpage like some important announcement and breaking news etc. In these cases, it can better option to use a Floating Message Box which will appear in front of the webpage . Today, I am going to discuss the code which will create a floating message box using jquery . You can use this code everywhere you want .

Step 1:
Copy and paste the following code on the head section of your webpage .

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery.dimensions.js"></script>
<script language="javascript">
	var name = "#floatMess";
	var menuYloc = null;
		$(document).ready(function(){
	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
			$(window).scroll(function () {
				offset = menuYloc+$(document).scrollTop()+"px";
				$(name).animate({top:offset},{duration:500,queue:false});
			});
 
			$('#close_message').click(function()
			{
  			$(name).animate({ top:"+=15px",opacity:0 }, "slow");
			});
		});
	 </script>

Step 2:
Add the following code in the CSS style sheet or in the style section of html page.

#floatMess {
		position:absolute;
		top:5px;
		float:left;
		width:95%;
		border:1px solid #999;
		background-color:#456;
		color:#ccc;
		padding:5px 5px 5px 25px;
		text-align:center;
 
		}

The above codes select the color,size font color, width etc of the floating message box.
You can change the upper parameters as per your requirements.

Step 3:
Now it’s the time for adding the main thing in the body section of your webpage ie the main message DIV which is going to be displayed on the webpage. Copy the following codes and paste it in the beginning of the body section or anywhere , it will not affect the other div of the page .

<div id="floatMess"><img id="close_message" style="float:right;cursor:pointer"  src="cross.png" />
      Your message Goes here
 </div>

Step 4:
You will need to download following three files and save it in the same folder which contains the main html file.

• jquery.js
• jquery.dimensions.js
• cross.png ( ICON need to display cross image at the message box )

Downloads:

• Click here to download jquery.js
• Click here to download jquery.dimensions.js
• Click here to download cross.png

DEMO

• Click here to see DEMO
• Click here to download the zip version of demo file .