get location +20px?

Question

    $(document).ready(function() { 

     //select all the a tag with name equal to modal
     $('a[name=popup]').click(function(e) {
      //Cancel the link behavior
      e.preventDefault();

      //Get the A tag
      var id = $(this).attr('href');

  //Set the popup window to center
  $(id).css('top',  winH/2-$(id).height()/2);
  $(id).css('left', winW/2-$(id).width()/2);

can i change the popup window below the a href tag(top:dom?+20px) and not center??

Answer 1

You can change your top to this:

$(id).css('top', $(this).offset().top + 20);

.offset() returns the position of the clicked link, and you want the top value, this returns the top of the clicked link, so you may want to add it's height as well, e.g.:

$(id).css('top', $(this).height() + $(this).offset().top + 20);

Answer 2

$(document).ready(function() {  

    //select all the a tag with name equal to modal
    $('a[name=popup]').click(function(e) {
        //Cancel the link behavior
        //e.preventDefault(); //return false handles this

        //Get the A tag
        var id = $(this).attr('href');
        var position = $(this).position();

        //Set the top value to be 20px from the top
        $(id).css('top', (position.top + 20) + 'px');

        return false;
    }
});

http://api.jquery.com/position/