Причудливая коробка и изящная деградация?

Question

Я пытаюсь ввести форму входа через лайтбокс, используя встроенный контент, однако, я хотел бы, чтобы это изящно ухудшилось, если у пользователя нет javascript. Согласно документации fancybox, мой тег должен иметь href идентификатора содержимого для отображения, например, так:

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

Это нормально, пока кто-то не заходит с отключенным JavaScript. Тогда они связаны с чем-то, что не существует. На мой взгляд, лучшим решением является разметка:

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

Таким образом, если что-то сломается, пользователь будет перенаправлен на внешний журнал на странице. Есть ли способ достичь этого с помощью fancybox или другого решения для лайтбокса?

Answer 1

Удалить встроенный style="display:none;"

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

Скройте это с помощью javascript/jQuery:

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

Таким образом, если javascript отключен, контент все равно будет виден и якорь будет работать правильно.

Вы можете создать ссылку с помощью javascript, если вы чувствуете, что она избыточна, когда js отключен, и вы обеспокоены этим (имейте в виду, что это нишевый случай, так что это скорее оптимизация).

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

---

Если вы хотите использовать ссылку на страницу внешнего входа, когда js отключен, просто измените href, Пример:

<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');

Таким образом, пользователи без js получают нормальную ссылку, а все остальные получают хэш-ссылку.