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

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 получают обычную ссылку, а все остальные получают хэш-ссылку.