jquery bpopup position popup to my #class

Question

i asked this similar question before about positioning my jquery bpopup below my link and someone gave me an answer to which it will show the popup where my mouse cursor clicks..this kind of worked until i got a very long page with multiple popups...it stopped working... This was my old post: jquery bpopup show popup where my link code is a href

To solve my problem, does anyone know how to make bpopup position to a #class? so if my href is:

<a href=\"#\" class=\"notesbutton\">Popup</a>

I want the popup to show up under the ahref class "notesbutton"

Here is my js code:

;(function($) {
    $(function() {
        $('.notesbutton').bind('click', function(e) {
            e.preventDefault();
            $('#notesdisplay').bPopup({
            position: [1,1]
            });
        });
    });
})(jQuery);

html:

<a href=\"#\" class=\"notesbutton\"><b>Yes</b></a>
<div id=\"notesdisplay\">$notes</div>

Answer 1

you can get your link's position with the jQuery#offset method

$('.notsbutton').on('click', function(e) {
  e.preventDefault();

  console.log({
    x: $(this).offset().left,
    y: $(this).offset().top + $(this).height()
  });
});

NOTE that you might gonna need to specify display: inline-block for your A links in order to make the sizes and positioning work correctly in different browsers