Menu icon Foundation
Reveal Modal Popup Not Working

I'm fairly new at Foundation, and I'm trying to figure out how to add popups to a site I'm creating.  I'm using Foundation-flex 6.  I copied and pasted code from the Foundation 6 REVEAL page, but it doesn't work on my experiment page.  The text "Click me for a modal" doesn't even show up on the web page unless I remove the anchor.  What am I missing?!

Here's my code for this part:

<div class="row">
  <p><a data-open="exampleModal1">Click me for a modal</a></p>
</div>

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

In my head section, I'm using these:

<link rel="stylesheet" href="http://spring.edu/foundation-flex/css/foundation.min.css">
<link rel="stylesheet" href="http://spring.edu/foundation-flex/css/app.css">

and at the end of the body section, I've got these:

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/what-input.min.js">
</script>
<script>
   $(document).foundation();
</script>

If anyone could tell me what I'm missing and how to fix it, I'd greatly appreciate it!  I want to do a number of popups on the site.  Thanks!

revealmodalpopupfoundation-flex

I'm fairly new at Foundation, and I'm trying to figure out how to add popups to a site I'm creating.  I'm using Foundation-flex 6.  I copied and pasted code from the Foundation 6 REVEAL page, but it doesn't work on my experiment page.  The text "Click me for a modal" doesn't even show up on the web page unless I remove the anchor.  What am I missing?!

Here's my code for this part:

<div class="row">
  <p><a data-open="exampleModal1">Click me for a modal</a></p>
</div>

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Awesome. I Have It.</h1>
  <p class="lead">Your couch. It is mine.</p>
  <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

In my head section, I'm using these:

<link rel="stylesheet" href="http://spring.edu/foundation-flex/css/foundation.min.css">
<link rel="stylesheet" href="http://spring.edu/foundation-flex/css/app.css">

and at the end of the body section, I've got these:

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/what-input.min.js">
</script>
<script>
   $(document).foundation();
</script>

If anyone could tell me what I'm missing and how to fix it, I'd greatly appreciate it!  I want to do a number of popups on the site.  Thanks!

Rafi Benkual over 2 years ago

Looks like you're missing the Foundation JS.

You can get the CDN links here:

https://cdnjs.com/libraries/foundation

Make sure to grab foundation.min.js and a copy of jquery

or a download version

http://foundation.zurb.com/sites/download.html/

 

Order is important:

 

Rafi Benkual over 2 years ago

Seems like there is an issue with your JS files. Here is what the default layout looks like in a fresh download.

 

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Anthony Abraira almost 2 years ago

Have you taken a look here?

The issue is rooted in the close event for the reveal not removing the

'is-reveal-open'

 class from the body tag.

Anthony Abraira almost 2 years ago

Now discovered that removing the animation is what caused the issue. No animations but at least the page scrolls after the reveal is closed.

These were the data attributes that I had:

data-animation-in="hinge-in-from-middle-x fast" data-animation-out="someAnimationOut fast"

giovanni rivera 4 months ago

I have a similar question, In my case everything works but when I set the data-animation-out and actually clse the reveal the page do not want to scroll anymore and I have to refresh the page, but if I remove the data-animation-out and jus use the data-animation-in  the page scroll normal when closing the reveal. that is very strange....

This is the page link Im testing 

 

 

This is the code I'm using. By the way I'm using the ZURB-template

 

HTML

 <div class="reveal large" id="image{{@index}}" data-reveal data-animation-in="gallery-in" data-animation-out="gallery-out">
        <button class="close-button" data-close type="button">
            <span aria-hidden="true">&times;</span>
        </button>
        <img class="modal-img" src="{{this.url}}" alt="">
    </div>

 

CSS

.gallery-in {
    @include mui-animation(slide(in, down), fade(in));
    animation-duration: 1.5s;
}
.gallery-out {
    @include mui-animation(slide(out, up), fade(out));
    animation-duration: 1.5s;
}