Menu icon Foundation
Reveal not working with foundation 5.0.3

<!-- CSS -->
<link rel="stylesheet" href="css/foundation.css" type="text/css" media="all" />
<!-- Script -->
<script src="js/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
</script>
</head>

<body>
<section class="content">
<div class="row">

<div class="small-12 medium-4 large-4 columns"><a href="#" data-reveal-id="suit"><img src="images/bespoke-suit.jpg"></a></div>

<div id="suit" class="reveal-modal" data-reveal><img src="images/bespoke-suit.jpg"><a class="close-reveal-modal">&#215;</a></div>

    
</div><!-- content row -->
</section><!-- content -->        

I'm having problems with reveal using foundation 5.0.3

I've used this with foundation 3 and 4 and it works perfectly but when I click the image it just tries to open up the # instead of the popup.

Any ideas?

revealmodal

<!-- CSS -->
<link rel="stylesheet" href="css/foundation.css" type="text/css" media="all" />
<!-- Script -->
<script src="js/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<script>
$(document).foundation();
</script>
</head>

<body>
<section class="content">
<div class="row">

<div class="small-12 medium-4 large-4 columns"><a href="#" data-reveal-id="suit"><img src="images/bespoke-suit.jpg"></a></div>

<div id="suit" class="reveal-modal" data-reveal><img src="images/bespoke-suit.jpg"><a class="close-reveal-modal">&#215;</a></div>

    
</div><!-- content row -->
</section><!-- content -->        

I'm having problems with reveal using foundation 5.0.3

I've used this with foundation 3 and 4 and it works perfectly but when I click the image it just tries to open up the # instead of the popup.

Any ideas?

Trevor West over 5 years ago

Put

$(document).foundation();

at the end of your document. Along with all of your javascript I would suggest.

Rafi Benkual over 5 years ago

The code is working right. http://cdpn.io/AovLw
Are you loading all those scripts in the head?

Try moving the

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

$(document).foundation();
</script>

before the closing body tag. Also I removed reveal.js as it is included in foundation.min.js.

Richard Longmuir over 5 years ago

Thanks guys that worked, much appreciated.