0

インライン コンテンツを使用してライトボックス経由でログイン フォームを入力しようとしていますが、ユーザーが JavaScript を持っていない場合は、これを適切に低下させたいと考えています。fancybox のドキュメントによると、私のアンカー タグにはhref、次のように表示するコンテンツの ID が必要です。

<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>

このようにして、何かが故障した場合、ユーザーは外部のログオン ページに誘導されます。ファンシーボックスまたは他のライトボックスソリューションでこれを達成する方法はありますか?

4

1 に答える 1

1

インラインを削除style="display:none;"

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

代わりに javascript/jQuery で非表示にします。

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

これにより、javascript が無効になっている場合でもコンテンツは表示され、アンカーは正しく機能します。

js が無効になっているときに冗長であると感じ、それについて心配している場合は、javascript でリンクを作成できます (これはニッチなケースであるため、これはより最適化であることに注意してください)。

$('#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 を持たないユーザーは通常のリンクを取得し、それ以外のユーザーはすべてハッシュ リンクを取得します。

于 2012-02-23T03:34:34.707 に答える