Question

我正在使用ZURB Foundation 5及其JS Script'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中不需要hashtag，但当使用.no-js时，display:none变为display:block时，推理背后的原因是<a href>意味着当没有java时链接最少做某事检测到-script。

我需要的解决方案

现在因为我在sitename.com/#bits-n-bobs内使用哈希标签在显示模式框时更新了URL，虽然这不是问题但我想要一个解决方案，如果有人预订标记，或分享一个链接标签自动显示框本身。

例如，如果我点击 Bits and Bobs ，则网址将为{{1}}并显示模态。我想要的是当有人在使用主题标签访问该页面时将域与主题标签链接时，使用JavaScript 打开显示模式，而无需单击 。

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

Answer 1

在加载时，您可以使用id从网址获取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');
   }
});

Zurb Foundation Hashtag在URL书签或反向链接上显示模态

1 个答案: