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

Я пытаюсь ввести форму входа в систему через лайтбокс, используя встроенный контент, однако я хотел бы, чтобы это изящно деградировало, если у пользователя нет 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 или какого-либо другого решения для лайтбоксов?


jquery lightbox fancybox progressive-enhancement graceful-degradation
person Chris Sobolewski    schedule 23.02.2012    source источник
comment
Вы загружаете форму входа с помощью AJAX или она уже находится на странице внутри <div id="fancybox-logon">? Что представляет собой My content!?   -  person Wesley Murch    schedule 23.02.2012
comment
форма входа, извините за неясность   -  person Chris Sobolewski    schedule 23.02.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

person Wesley Murch    schedule 23.02.2012
comment
Это, безусловно, один из способов сделать это, но он определенно неоптимален, учитывая макет страницы... - person Chris Sobolewski; 23.02.2012
comment
Я предположил, что это пример разметки, а не реальная вещь. Итак, что вы хотите сделать, когда js отключен? Я не уверен, что понимаю, что вы подразумеваете под неоптимальным. Мой контент! ваша форма входа или что-то еще? - person Wesley Murch; 23.02.2012
comment
Ну, я сделал еще одно редактирование, которое может быть тем, что вы хотите. Трудно сказать, когда вы не общаетесь. - person Wesley Murch; 23.02.2012