0

I have been working with foundation 5, the reveal modal does not trigger and I'm totally at a loss.

Here's the modal code

<td>
  <a href="#" data-reveal-id="modal">Delete</a>

  <div id="modal" class="reveal-modal medium" data-reveal>
      <p></p>
      <p>Please confirm</p>
      <a class="button radius">Confirm</a>
      <a class="close-reveal-modal">x</a>
  </div>
</td>

And the order of the scripts is in the right order just before closing the body tag.

<script src="/js/vendor/modernizr.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
    $(document).foundation();
</script>

I have tried to wrap the $(document).foundation(); in $(document).ready(function(){, but nothing is happening. The alert boxes work just fine, so I'm baffled by the problem with reveal modals.

Any help would be appreciated. Thanks.

mirrokle
  • 1
  • 1
  • This looks correct, so I don't know what the cause might be. Does your browser console log any errors? – Adam Elsodaney Oct 19 '14 at 14:23
  • @AdamElsodaney no the console is clean. The exact same codes work in jsfiddle. – mirrokle Oct 20 '14 at 05:42
  • Do you have your scripts in the proper folder and do you have the proper path of scripts in the source code? I would double check if the scripts are visible for the browser. Another problem shloud be access to your scripts by "file://" in your browser - you can try run some HTTP server and access it through it. – Knut Holm Oct 20 '14 at 12:12
  • Shouldn't you be including – Vahi Oct 20 '14 at 14:29
  • @Akarienta Thanks for the reply. The page already runs on server, and I assume the paths are correct because I've also used built-in alert boxes in the page which require jquery as well and they work as they should be. – mirrokle Oct 21 '14 at 13:34
  • Can you make a fiddle? I can't reproduce the problem, all seems fine and works. – Knut Holm Oct 21 '14 at 13:48
  • @Akarienta link to fiddle: http://jsfiddle.net/icekr/c6977ygp/ . When hitting delete the modal does pop up. – mirrokle Oct 21 '14 at 14:26
  • I'm confused now, fiddle also works well. Have you tried another browsers? Can you post a screen, movie or give us better explanation of the problem (what does happen if you touch the delete button and what behaviour do you need)? – Knut Holm Oct 21 '14 at 14:40
  • @Akarienta Tried it in Chrome, Firefox, IE, no luck. I suspect it's still the problem with jquery script as I tested with a simple function - hide a div when clicking on a link, there was no response either. Anyways, there's really not much time left and I've created the modal with pure css. Really appreciate your help. Thanks. – mirrokle Oct 22 '14 at 00:53

1 Answers1

-1

The reason this happening, is perhaps because the modal should be the direct child of the "body" element. It should not be part of the "td" element.

I found the answer on this page: http://foundation.zurb.com/forum/posts/20051-foundation-5-reveal-modal-doesnt-open

Getting There
  • 1
  • 2