CODEWITHSUNDEEP
javascriptcsszurb-foundation
Beginner
Beginner

Reputation: 1030

Foundation 5 modal not working

I'm sure I'm making a silly mistake but it took me hours and I couldn't find any solution for my problem. Everything seems ok but not working. I'm using Foundation 5 reveal. But modal window does not show. Here is my code:

HTML

<a class="openModal" href="#" data-reveal-id="imagemodal"><img src="image.jpg" /></a>
<div id="imagemodal" class="reveal-modal" data-reveal>Modal</div>

I've also included the following js files in body tag:

<script type="text/javascript" src="js/foundation/foundation.js"></script>
<script>
    $(document).foundation();
</script>
<script type="text/javascript" src="js/foundation/foundation.reveal.js"></script>

Any help is appreciated in advance.

Upvotes: 3

Views: 2144

Answers (2)

Robi Moller
Robi Moller

Reputation: 17

I just wanted to add this piece of simple, near bare-bones modal markup, I spent nearly 4 hours last night getting it right, I don't think there's much out there to deal with these reveal-modal issues

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.reveal.js"></script>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/foundation.min.css">
</head>
<body>
<a href="#" class="button" data-reveal-id="myNormal">reveal modal</a>
<div class="reveal-modal" id="myNormal" data-reveal>
  Modal
  <a class="close-reveal-modal">close</a>
</div>
<script>
  $(document).foundation();
</script>
</body>

I hope this is of any help for future visitors.

Upvotes: 1

Andy
Andy

Reputation: 63524

Put the call to foundation.reveal.js before you call $(document).foundation();.

I'm pretty sure this is because $(document).foundation(); initiates only those modules that have been specified prior to it, something that Foundation doesn't make clear in its notes.

Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page.

Upvotes: 5

Related Questions