Zurb Foundation Hashtag Reveal Modal on URL Bookmark or Backlinking

Question

I'm using ZURB Foundation 5 along with their JS Script 'Reveal Modal'. What I'd like to do is be able to have the modal display upon URL hashtag within the URL.

The Trigger

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

While the hashtag is not required in the a href the reasoning behind this is so when .no-js is being used the display:none becomes display:block meaning that the links least do something when no java-script is detected.

Solution I Need

Now because I'm using hash-tags within a <a href> the URL updates when revealing a modal box, while this isn't a problem I would like a solution that if someone book marks, or shares a's a link with the hashtag the box auto revealings itself.

For example if I clicked Bits and Bobs the url would be sitename.com/#bits-n-bobs and it'd reveal the modal. What I want is when someone links the domain with the hashtag upon visiting that page with the hashtag it opens the Reveal Modal using JavaScript without the need to Click .

I imagine this is something rather easy to do with JavaScript but its one of my weakest areas and appreciate any help or least pointing me in the right direction.

Answer 1

On load you can get the id from the URL with window.location.hash and then trigger the modal with this $('#myModal').foundation('reveal', 'open'); [source] .

Also check if an element exists with that id and has a class reveal-modal before opening it.

$(document).ready(function(){
   var target = $(window.location.hash);
   if(target.length > 0 && target.hasClass('reveal-modal'))  {
     target.foundation('reveal', 'open');
   }
});