Menu icon Foundation
Upgrade to 5 - Reveal no longer works

<div id="limits-modal" class="reveal-modal medium" data-reveal> <p><strong>Selected Limits: </strong><a href="#" onClick="closeLimitsModal()"><strong>Clear All&nbsp;&nbsp;x</strong></a></p><p><strong>Image Type:</strong> <a href="#" onClick="closeLimitsModal()">CT Scan&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Graphics&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Microscopy&nbsp;&nbsp;x</a></p><p><strong>Subsets:</strong> <a href="#" onClick="closeLimitsModal()">Basic Science&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Clinical Journals&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Chest X-rays&nbsp;&nbsp;x</a></p>

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

         

      <script>
  		$(document).foundation({reveal: {animation: 'fade', animationSpeed : 50, close_on_background_click: false}});
	</script>

            

         

t.html(t.html() + '&nbsp;<a href="#" data-reveal-id="limits-modal">...</a>&nbsp;');

            

         

I just upgraded to Zurb 5 and of course things don't work. :)

Right now I am struggling with reveal. The reveal modal won't even open now.

I have attached my code for

(a) my reveal modal
(b) my initialization code (btw, i tried the stock foundation() init also
(c) my trigger code

Running in chrome debugger I see no errors/warnings.

Any help appreciated!

revealmodal

<div id="limits-modal" class="reveal-modal medium" data-reveal> <p><strong>Selected Limits: </strong><a href="#" onClick="closeLimitsModal()"><strong>Clear All&nbsp;&nbsp;x</strong></a></p><p><strong>Image Type:</strong> <a href="#" onClick="closeLimitsModal()">CT Scan&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Graphics&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Microscopy&nbsp;&nbsp;x</a></p><p><strong>Subsets:</strong> <a href="#" onClick="closeLimitsModal()">Basic Science&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Clinical Journals&nbsp;&nbsp;x</a> <a href="#" onClick="closeLimitsModal()">Chest X-rays&nbsp;&nbsp;x</a></p>

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

         

      <script>
  		$(document).foundation({reveal: {animation: 'fade', animationSpeed : 50, close_on_background_click: false}});
	</script>

            

         

t.html(t.html() + '&nbsp;<a href="#" data-reveal-id="limits-modal">...</a>&nbsp;');

            

         

I just upgraded to Zurb 5 and of course things don't work. :)

Right now I am struggling with reveal. The reveal modal won't even open now.

I have attached my code for

(a) my reveal modal
(b) my initialization code (btw, i tried the stock foundation() init also
(c) my trigger code

Running in chrome debugger I see no errors/warnings.

Any help appreciated!

Rafi Benkual over 5 years ago

I tested your code in my project and it worked without changes. So we know it is not the framework itself.
http://prntscr.com/2hd7as

It might have to do with the project setup. Scripts before the closing body tag:

     <script src="js/jquery.js"></script>
    <script src="js/foundation.min.js"></script>
    <script src="js/foundation/foundation.reveal.js"></script>
    <script src="../../assets/js/marketing.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Glenn Ford over 5 years ago

Hi Rafi,

Here is how I include the scripts at the end.

 <script src="js/vendor/jquery.js"></script>

  <script src="js/foundation/foundation.js"></script>

  <script src="js/foundation/foundation.clearing.js"></script>

  <script src="js/foundation/foundation.dropdown.js"></script>

  <script src="js/foundation/foundation.joyride.js"></script>

  <script src="js/foundation/foundation.magellan.js"></script>

  <script src="js/foundation/foundation.orbit.js"></script>

  <script src="js/foundation/foundation.reveal.js"></script>

  <script src="js/foundation/foundation.topbar.js"></script>

  <script src="js/foundation/foundation.interchange.js"></script>

  <script src="js/foundation/foundation.abide.js"></script>

  <script defer src="js/plugins.js"></script>
  <script defer src="js/script.js"></script>
  <script src="js/openi.js"></script>
  <script>
      $(document).foundation({reveal: {animation: 'fade', animationSpeed : 50, close_on_background_click: false}});
  </script>
</body>

Glenn Ford over 5 years ago

I was getting really frustrated with this so moved the test code to a server that can be seen by all of you.

Please look at this URL and any help on why the reveal is broken here and not in version 4 is very welcomed.

http://imarketing-hq.com/zurb/

Glenn Ford over 5 years ago

I forgot to mention on there click the ellipsis in the top right.

Glenn Ford over 5 years ago

I added this piece of static HTML code and it works fine. So the problem is when I use javascript to modify the html it is broken.
HTML
<a href="#" data-reveal-id="limits-modal">test</a>

In my openi.js file I do this in a function called ellipsis. This function is used in conjunction with a redraw on browser resize to "clip" the limits line with the ellipsis.

For some reason zurb break when write out the html with javascript.

Glenn Ford over 5 years ago

FYI I do call reflow after the ellipsis function is called you can see this in the working code example I provided at http://imarketing-hq.com/zurb/

Rafi Benkual over 5 years ago

Hi Glen,

One thing we noticed, it is best to load this in the head:

Can make sure the site is upgraded to 5.0.3? That would help eliminate some issues.