0

我正在使用 ZURB Foundation 5 以及他们的 JS 脚本“Reveal Modal”。我想做的是能够在 URL 中的 URL 主题标签上显示模式。

触发

<a href="#bits-n-bobs" data-reveal-id="bits-n-bobs">Bits and Bobs</a></li>

显示模式

<div id="bits-n-bobs" class="reveal-modal" data-reveal>
    <h2>Bits and Bobs</h2>
    <p>Basil fawlty ron burgundy kris kristofferson.</p>
    <a class="close-reveal-modal">&#215;</a>
</div>

虽然 a href 中不需要主题标签，但其背后的原因是，当.no-js被使用display:none时，display:block这意味着当没有检测到 java 脚本时链接最少做某事。

我需要的解决方案

现在因为我<a href>在显示模式框时在 URL 更新中使用主题标签，虽然这不是问题，但我想要一个解决方案，如果有人添加书签或与主题标签共享链接，框自动显示本身。

例如，如果我单击Bits and Bobs，则 url 将sitename.com/#bits-n-bobs显示模态。我想要的是当有人在使用主题标签访问该页面时将域与主题标签链接起来时，它会使用 JavaScript 打开显示模式，而无需单击。

我想这是用 JavaScript 做的相当容易的事情，但它是我最薄弱的领域之一，感谢任何帮助或至少为我指明正确的方向。

4

1 回答 1

1

在加载时，您可以使用id从 URL获取window.location.hash，然后使用此$('#myModal').foundation('reveal', 'open'); [source]触发模式。

还要检查一个元素是否存在并且在打开它之前id有一个类。reveal-modal

$(document).ready(function(){
   var target = $(window.location.hash);
   if(target.length > 0 && target.hasClass('reveal-modal'))  {
     target.foundation('reveal', 'open');
   }
});
于 2015-03-13T08:48:23.000 回答