Zurb基金会标签在URL书签或反向链接上显示模式

Question

我使用ZURB Foundation 5以及他们的JS脚本'Reveal Modal'。我想做的是能够在URL内的URL标签的模态显示。

触发

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

The Reveal Modal

<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脚本时，链接最少做一些事情。

Solution I Need

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

例如，如果我点击比特和鲍勃 url将是sitename.com/#bits-n-bobs，它会显示模态。我想要的是，当有人链接的域名与hashtag在访问该页面的hashtag，它打开使用JavaScript显示模态使用，而不需要点击。

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

Answer 1

加载时，您可以使用window.location.hash从URL获取id，然后使用此$('#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');
   }
});