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

• Monday, August 4, 2008, 16:39
• javascript, jquery, tutorial
• 25 comments

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

.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;
}

$(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);
});

• Share
  Delicious Digg Design Float Mixx Reddit StumbleUpon Technorati

25 Comments on “How to display pop-up message on mouse clicked position using jQuery”

• 
  Andrew wrote on 16 September, 2008, 12:43

  Hi!

  This is a very nice code I’d like to use!

  I haven’t tried it yet, but I have one quick question.

  This code seems to affect the entire webpage when you click anywhere on it.

  How can I make the pop-up appear when I click on a text link?

  This is my situation.

  I have a page, but some links point to my unavailable pages that are under construction.

  so I used the link “#” to send the user back to the top of the page when they click on that link.

  But I’d also like to put a pop-up message, letting them know that the link they just clicked is unavailable.

  Can you please help me?

  Thanks for your time.
  -Andrew
• 
  Roshan wrote on 17 September, 2008, 4:24

  @andrew – let’s suppose that the id of that link is “anchorid” then you can use the following code to display popup for that particular link ..

  $(‘#anchorid’).click(function(e){
  rather than
  $(document).click(function(e){
• 
  Andrew wrote on 17 September, 2008, 13:48

  Hey thanks for the reply Roshan!

  However, I am still having some problems…

  I tried changing:

  $(document).click(function(e){
  to
  $(’#anchorid’).click(function(e){

  I made the CSS declaration for the ID: anchorid

  I added the ID in the format: id=”anchorid”
  to both plain text, and to a link to test them.

  Both did not seem to work.

  Are you sure there are no changes to be made to the .js or any other section?

  Since this change seems to be so simple to do, can you please make us a little example when you have the time?
  Like the “Live Demo” page you have above.

  I don’t think anyone will really want popups on every part of their page as in the first example.

  But if you can target the popup to links, buttons, etc…, then that makes this script extremely useful!

  Thanks again for your time!
  I hope to hear from you soon.
  -Andrew
• 
  Jace wrote on 7 October, 2008, 9:29

  Managed to get this working.
  Firstly make sure toe enclosing single quote is correct:

  $(‘#anchorid’).click(function(e){

  Secondly enclose the script in the following:

  $(document).ready(function() {
  CODE HERE
  });
• 
  Anuk wrote on 7 October, 2008, 17:15

  it works
• 
  kamal wrote on 21 October, 2008, 21:15

  Hi, and thanks for sharing the must lovely script in the world.
  i have one question?
  using your script, remember me some website who let people to download files, so after the page load and try to click over the link download or any place in the website, an advertising popup appear just one time… so it’s possible to do it with this jQuery technique you use.
  thanks (sorry 4 my english)
• 
  Roshan wrote on 22 October, 2008, 7:02

  @kamal – yes it is definately possible kama…you have to show the popup in the anchor click event and I think that won’t be tough task
• 
  Mohan wrote on 10 November, 2008, 8:23

  Hello!

  I was suppose to use ur script in one of my tasks, suppose if i have multiple buttons with different id’s i want the function to be called and a seperate popup to be shown for each button i click. do i need to use a individual script for all buttons i use??? or i can change the existing script to resolve the issue!….
• 
  Roshan wrote on 10 November, 2008, 16:40

  @mohan – you can do it by having similar similar id of realted links and popups then using jquery to extract the id name when clicked and then displaying the realated popup..one script will be enough if you know the jquery
• 
  Gokhan wrote on 5 December, 2008, 12:07

  First thanks for the great code.
  I want to use right click instead of left click is it possible?
• 
  nagendran wrote on 6 December, 2008, 6:08

  thanks for great code, i want disaplsy or past some text at mouse clicked position, only one time ,
• 
  zany wrote on 27 January, 2009, 4:17

  This pop-up is cool ,but to disable it ,can we add some function for eg if we press outside the background or close X or ecape key the pop-up will be disabled.Can you please help me with this???
• 
  asdf wrote on 1 May, 2009, 17:22

  $(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);
  });
• 
  Darren Fauth wrote on 19 May, 2009, 19:52

  Nice. I appreciate this tutorial and the good explanation in the comments about how to do this with a link…I’m using a form button. Works great. Thanks!
• 
  Vasim Padhiyar wrote on 25 September, 2009, 8:22

  your script works.
  thank you for sharing
• 
  Eyveneena wrote on 26 October, 2009, 19:45

  thank you, thank you, thank you…..:)
• 
  aarzman wrote on 29 October, 2009, 13:26

  Great script!! Is there any jquery control to stop the popup box appear out side of the window? possibly but declaring the window.innerHeight and window.innerWidth?
  thanks for sharing!
• 
  Imran wrote on 25 February, 2010, 6:38

  Hey buddy. You saved my couple of hour surely..thanks
• 
  Nisha wrote on 15 June, 2010, 3:44

  Thanks for the tip. It is very useful
• 
  Matt wrote on 26 August, 2010, 2:29

  Hi Roshan,

  I’m trying to implement this into a map setting, but I can’t seem to get it to work properly. I’ve tried the stuff mentioned in other comments, but they don’t seem to work either.

  My chunk of code:

  function showPopup(id, leftbul, topbul){
  map.find(settings.popupSelector).fadeOut();
  var boxid = ‘#’ + id + ‘-box';
  $(document).click(function(e)
  {
  var height = ‘400’;
  var width = ‘275’;
  leftVal=e.pageX-(width/2)+”px”;
  topVal=e.pageY-(height/2)+”px”;
  $(boxid).css({left:leftVal,top:topVal}).fadeIn();
  });
  $(settings.popupCloseSelector).click(function(){
  $(this).parent().fadeOut();
  });
  }

  In my example above, you can see that it is grabbing the ID’s in a special way. my id’s look something like “e1-box”, so that isn’t my issue.

  When I click the anchor, it brings the popup perfectly, however after that I can’t get it to STOP popping up, clicking anywhere else on the map, it brings it over to that spot. Clicking another link brings up the second link for a split second, then turns into the original popup.

  Changing (document).click to (boxid).click doesn’t cause any popup to show up as well. If you could promptly give me some insight, I would greatly appreciate it.
• 
  vikas gautam wrote on 8 February, 2011, 5:08

  thank for the article its helpfull for me

Trackbacks

1. Fatih Hayrio?lu'nun not defteri » 06 A?ustos 2008 web’den seçme haberler » AspNet, Ba?lant?, güzel, Formlarda, kontrolüne, tak?lan, hatalar?, nas?l, düzeltirsiniz, Güzel
2. Nova’s Blog » Blog Archiv » JQuery Tutorials für Einsteiger
3. pligg.com
4. All about jQuery position and offset – Richard Choi

Write a Comment