Web Hosting Geeks | Web Hosting Experts
Need help? Call us 1(866)TOP-HOST

14120 reviews 1680 hosting providers

Questions & Answers

Display pop-up message on mouse clicked position using jQuery

May 22, 2012 by jeremy
Greetings
I am using jQuery and I want to get the mouse clicked position and display the pop-up message in that mouse clicked position. 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. Has anyone tried this? And does anyone know how to do it. Please help

thanks and regards

2 Answers

0 votes
May 22, 2012 by TopNet
Use the following  HTML code or CSS code to display pop-up message on mouse clicked position

HTML

<div id="popuup_div" class="popup_msg">
   .... mssage here...
</div>

CSS
.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;
}
0 votes
May 22, 2012 by SmartHost
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);
});