How to open a Foundation Reveal modal javascript

Question

I've been trying to follow the Foundation docs, but I really can't figure out how to open a modal window using jQuery. Here's what I have:

Fiddle

HTML:

<a href="#" id="myModal" class="reveal-link">Name</a>

<div id="myModal" class="reveal-modal">
      <a class="close-reveal-modal">&#215;</a>
</div>

jQuery:

$(document).ready(function(){
    $(document).foundation();
    $('a.reveal-link').trigger('click');
    $('a.close-reveal-modal').trigger('click');
 });

Thanks, any help would be appreciated!

Answer 1

You are mistakenly setting the same id on both the <a> and <div> tags.

Two ways to do this:

1. Your modal has the id 'myModal', so you should set the attribute data-reveal-id='myModal' to your <a> tag. You've instead set id="myModal", which you should remove. The JavaScript you are using should work with this change.

2. Change the <a> tag's id to id="modalLaucher" and then use:

   $("#modalLauncher").click(function (e) {
       $('#myModal').foundation('reveal', 'open');
   });