CODEWITHSUNDEEP
javascriptjqueryhtmlcss
zadubz
zadubz

Reputation: 1301

How can I get a javascript popup div to display along side every link its clicked from?

How can I get a initially hidden javascript popup div id="signup-form" to display directly under every link its clicked from ?

Link 1

Link 2

Link 3

Div id=signup-form (display:none)

Sorry am on mobile very hard to write code

Upvotes: 1

Views: 1413

Answers (2)

Keith.Abramo
Keith.Abramo

Reputation: 6955

Here is a jsfiddle which will do what you need.

http://jsfiddle.net/mVLJf/

You can use the .after() query function to put content or elements after the selected elements in the jquery selector.

Upvotes: 3

Matthew
Matthew

Reputation: 8416

Get the position of your link with jQuery's offset method. It returns the top and left position of the element in question relative to the whole document .

Just place your DIV under the link and show it.

You might also want to subtract the document.scrollHeight() from your top position as well.

// get position of your link
var left = jQuery("A#myLink").offset().left;
var top = jQuery("A#myLink").offset().top;

// position the DIV by the link minus how far the page is scrolled
// plus 10px so it shows up under your link
jQuery("#myDiv").style("left", left);
jQuery("#myDiv").style("top", top-document.scrollHeight()+10+"px");

Upvotes: 2

Related Questions