How to display pop-up message on mouse clicked position using jQuery

Posted on August 4, 2008
Filed Under javascript, jquery, tutorial

Yesterday, my friend Sujit asked me how can we get the mouse clicked position and display the pop-up message in that mouse clicked position using jQuery.Today, I’ve come up with the tutorial for the solution of this problem. In this tutorial, you’ll see how to display the pop-up message in mouse clicked position using jQuery. When you click the mouse in any position of document, the pop-up message gets displayed with the mouse position around the middle part of the pop-up message.

Live Demo Download Full Source Code

HTML code to display pop-up message on mouse clicked position

<div id="popuup_div" class="popup_msg">
   ....you can write the mssage here...
</div>

As you can above, the element displaying pop-up message is defined with the id “popup_div” and class of this element is “popup_msg“. You can write your custom message inside that div.

CSS code to display pop-up message on mouse clicked position

.popup_msg{
position:absolute;
z-index:10;
width:172px;
height:102px;
text-align:center;
color:#FF0000;
font: 14px Verdana, Arial, Helvetica, sans-serif;
background:url(bg_image.gif) bottom right no-repeat;
display:none;
}

The above CSS attribute is straightforward and you can change the attribute according to your requirement. But remember that, the position attribute should be set to absolute value and z-index should be greater than the other element’s z-index. Furthermore, the width and height attribute must be set according to the background image of pop-up message.

JavaScript ( jQuery ) code for displaying pop-up message

$(document).click(function(e)
{
  //getting height and width of the message box
  var height = $('#popuup_div').height();
  var width = $('#popuup_div').width();
  //calculating offset for displaying popup message
  leftVal=e.pageX-(width/2)+"px";
  topVal=e.pageY-(height/2)+"px";
  //show the popup message and hide with fading effect
  $('#popuup_div').css({left:leftVal,top:topVal}).show().fadeOut(1500);
});

As the above code is well document. I’m just going to give you the brief description. First of all, we took the height and width of the pop-up element. After that, we’ve calculated the left and top offset of element so that it gets displayed with the mouse position is around in it’s middle part. of the element With the last line of jQuery code, pop-up message’s left and top position is set and displayed. This pop-up message gets hidden with fading effect with the fadeOut() function of jQuery.

Live Demo Download Full Source Code

Popularity: 11% [?]

Follow me on twitter at http://twitter.com/roshanbh.

» Flashing Alert Message Box using JQuery
» Top Floating message box using jQuery
» State preserved bottom hanging message box using jQuery
» Move an object on mouse wheel scroll event using JavaScript