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.

Look into on hover in JavaScript: stackoverflow.com/questions/608788/… — TylerH
Thanks but that page has nothing to do with Hashtag and Modal boxes. It's about Hover overs. I want a Modal that triggers via JavaScript and by Hashtag URL access. — Simon Hayter

anpsmn anpsmn · Accepted Answer · 2015-03-13T08:48:23

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');
   }
});

Zurb Foundation Hashtag Reveal Modal on URL Bookmark or Backlinking

1 Answers