5

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!

Andrew
  • 3,501
  • 8
  • 35
  • 54
  • 1
    It depends on what version of foundation you are using. The latest version of foundation uses $('#myModal').foundation('reveal', 'open'); to open a reveal popup. Older versions use $('a.reveal-link').trigger('click'); As @pcx mentioned, you are using the same ID for both the reveal-link and reveal-modal which would cause a javascript error. – Gavin Bruce Aug 23 '13 at 10:27

1 Answers1

15

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');
});
pcx
  • 984
  • 11
  • 21
  • 2
    This might be outdated, refer to this question for a better answer : http://stackoverflow.com/questions/33855505/zurb-foundation-6-reveal-doesnt-work – kchetan May 14 '17 at 00:38