Question

I’m trying to create a fancybox popup for a childrens mobile site.

• It will only appear for external links
• It presents links to continue to the external website link or to close the fancybox and return to the page

The only solution I’ve been able to find so far is using something like this for each link…

<a id="external" href="#external-block">Go to external link</a> 

<div style="display:none">
<div id="external-block">
<h2>Warning</h2>
<p>Hey, you're leaving this site <p>
<a href="onclick="$.fancybox.close();">Return</a>
<a href="http://actuallink">Leave the site</a>
</div>

and in the js

$(document).ready(function() {
  $("a#external").fancybox();
});

But it’s redundant for each link. I’d like to find a way to have one js function that detects if a link on the page is external, and when it’s clicked instead of going to the url it grabs the href and makes (i.e. not having a hidden div for each link) a fancybox popup with messaging to go to that url or go back.

Answer 1

Is using fancybox a requirement? This could probably be simpler without it.

You could create a single hidden fixed element which would act as the light-box and make the box visible whenever a link is clicked on. Granted you would also need to add your own functionality to hide the box by having a close button, but that should be simple enough.

To set the external link inside this new light-box you would simply do something like this:

$('a[href^="http://"], a[href^="https://"]').click(function(e) {
    // This is used to override the default event and
    // stop the browser from redirecting the user to the url.
    e.preventDefault();

    // Set the href for the #external_link element inside the lightbox
    // to the one from the anchor tag that was clicked on.
    $("#lightbox #external_link").attr("href", $(this).attr("href"));

    // Show the light-box
    $("#lightbox").show();
});

If you’re after the fading effects that fancybox offers, I’d recommend taking a little time to read up on CSS transitions.