Question

I have been using the onclick function for links that go to an external site:

<a href="http://outsidelink.net" target="_blank" onclick="return confirm('You will now be transfered to a third party website');">External Link</a> 

But I have since created a “lightbox” like version using jQuery that informs users that they are going to another, third party site. I don’t want to manually duplicate each link into new lightbox every time. I’d rather copy the href from the link on the page and add it to a “Continue” button in my lightbox.

How would I take a link like this:

<a class="outsidelink" href="http://outsidelink.net">External Link</a> 

And add it to my lightbox where I have “CopiedLink”:

<div id="container">
<div id="textbox">
<a id="nothanks" href="#">Close</a>
<p>You are about to leave the site and go to a third party website.</p>
<a id="newlinkontheblock" href="CopiedLink" target="_blank">Continue</a>
</div>
</div>

I’ve already created the .click functions that create the lightbox, I just don’t know how to take the link from the page and insert it into the newly created lightbox. Any ideas?

Answer 1

Something like this should do it

$('a.outsidelink').click(function(e){
   // cancel default action of link so that it is not followed
   e.preventDefault();

   // open light box here


   // then
   $('#newlinkontheblock').attr('href', this.href);
});