花哨的盒子和优雅的退化？

Question

我试图通过使用内联内容的灯箱输入登录表单，但是，如果用户没有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>

这样，如果出现故障，用户将被定向到页面上的外部登录。有没有办法用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，内容仍然可见，并且锚点将正常工作。

如果您在禁用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的用户获得普通链接，其他人都获得了哈希链接。