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

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

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

  1. Andrew

    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

  2. @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){

  3. Andrew

    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

  4. Jace

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

  5. it works

  6. 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)

  7. @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

  8. Mohan

    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!….

  9. @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

  10. Gokhan

    First thanks for the great code.
    I want to use right click instead of left click is it possible?

  11. nagendran

    thanks for great code, i want disaplsy or past some text at mouse clicked position, only one time ,

  12. 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???

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

  14. 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!

  15. your script works.
    thank you for sharing

  16. Eyveneena

    thank you, thank you, thank you…..:)

  17. aarzman

    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!

  18. Hey buddy. You saved my couple of hour surely..thanks

  19. Nisha

    Thanks for the tip. It is very useful

  20. Matt

    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.

  21. thank for the article its helpfull for me

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>