Question

I am trying to put in a log-in form via a lightbox using inline content, however, I would like to have this gracefully degrade if the user does not have javascript. According to the fancybox documentation, my anchor tag should have a href of the ID of the content to display, like so:

<a href="#fancybox-logon">Log On</a>
<div id="fancybox-logon" style="display:none;">My log on form!</div>

This is fine, until someone visits with JavaScript off. Then they’re linked to something that doesn’t exist. A better solution, in my mind, is markup like this:

<a href="logon.php" data-lightbox="fancybox-logon">Log on!</a>
<div id="fancybox-logon" style="display:none;">My log on form!</div>

This way, if something breaks down, the user will be directed to an external log on page. Is there a way to achieve this with either fancybox or some other lightbox solution?

Answer 1

Remove the inline style="display:none;"

<a href="#fancybox-logon">Log On</a>
<div id="fancybox-logon">My content!</div>

Hide it with javascript/jQuery instead:

$('#fancybox-logon').hide();

This way, if javascript is disabled the content will still be visible and the anchor will work correctly.

You can create the link with javascript if you feel it’s redundant when js is disabled, and you’re concerned about it (keep in mind this is a niche case, so this is more of an optimization).

$('#fancybox-logon').before('<a href="#fancybox-logon">Log On</a>');

---

If you want to use the link to the external login page when js is disabled, just change the href. Example:

<a href="logon.php" data-lightbox="fancybox-logon">Log on!</a>
<div id="fancybox-logon" style="display:none;">My content!</div>

$('[href="logon.php"]').attr('href', '#fancybox-logon');

This way, users without js get the normal link and everyone else gets the hash link.