Menu icon Foundation
Why is this reveal code not working?

After moving to Foundation 5 I can not longer get reveal to work. I am sure it is something that I am doing wrong, but can not figure it out. Could someone look at this fiddle and tell me where I am going wrong? - http://jsfiddle.net/64KRq/23/

If I try to use data-reveal-ajax no model displays.
Thanks!

foundation5revealAJAX

After moving to Foundation 5 I can not longer get reveal to work. I am sure it is something that I am doing wrong, but can not figure it out. Could someone look at this fiddle and tell me where I am going wrong? - http://jsfiddle.net/64KRq/23/

If I try to use data-reveal-ajax no model displays.
Thanks!

James Gehring over 5 years ago

You need to have the href set differently, try this.

<a href="#" data-reveal-id="myModal" data-reveal-ajax="true">
    Click Me For A Modal
</a>

chris breshears over 5 years ago

But if you don't have an href, it will have nothing to load.

From the docs:

To use an url from href attribute just add data-reveal-ajax="true" instead.

Example:

<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
    Click Me For A Modal
</a>

James Gehring over 5 years ago

I have been playing with this and I cant get it to work either, sorry.

chris breshears over 5 years ago

Thanks for taking a look James, think I will roll back to version 4 for now.

Rafi Benkual over 5 years ago

I assume you are trying to load google.com inside your modal. You will likely not be able to load it that way.

We also removed the data-reveal-ajax="true" as it was likely the reason it was not working. Linking to outside resources may not work.

There is a better way to do that with iframe: http://cdpn.io/eafmE (click edit pen lower left to see code)

David Ko over 5 years ago

Hi, i don't know if you still need help with this. But here's what I tried with your code.

 ``` <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/normalize.css" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/css/foundation.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>


<a href="http://google.com" data-reveal-id="myModal" data-reveal="true">
    Click Me For A Modal
</a>
<div id="myModal" class="reveal-modal" data-reveal>
    The text you wanted will be here.
</div>



<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.reveal.js"></script>
<script>
    $(document).foundation();
</script>