Menu icon Foundation
Reveal modal not working...

Hello,

I am not sure why this basic reveal modal is not working... what am I missing?

<body>

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

<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

  <h2 id="modalTitle">Awesome. I have it.</h2>

  <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>

  <a class="close-reveal-modal" aria-label="Close">&#215;</a>

</div>

 

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>   

<script src="js/jquery-2.2.2.min.js"></script>

 <script>

    $(document).foundation();

</script>

</body>

The JS folder is at the root level:

js folder

</body>

modal reveal

Hello,

I am not sure why this basic reveal modal is not working... what am I missing?

<body>

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

<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

  <h2 id="modalTitle">Awesome. I have it.</h2>

  <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>

  <a class="close-reveal-modal" aria-label="Close">&#215;</a>

</div>

 

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

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>   

<script src="js/jquery-2.2.2.min.js"></script>

 <script>

    $(document).foundation();

</script>

</body>

The JS folder is at the root level:

js folder

</body>

Brian Tan over 3 years ago

The syntax looks like foundation 5.

You have jquery in 3 places. Use one only, say Vendor/jquery.js

Get rid of the line js/foundation.reveal.js. Js/foundation.min.js already includes reveal.

Make sure you have viewport meta in <head> 

sanlorena over 3 years ago

Thank you Brian - I cleaned up the code and downloaded Foundation6 but I am still having the same problem... this is the updated version:

<!DOCTYPE HTML>

<html>

 <head>

    <title>index</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <meta name="description"/>

    <meta name="author">

    <!-- Style Sheets -->

    <link rel="stylesheet" href="css/foundation.min.css" />

    <link rel="stylesheet" href="css/normalize.css" />

    <link rel="stylesheet" href="css/styles.css" />

    <!-- HTML% shiv -->

    <!--[if lt IE 9]>

        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

  </head>

 

<body>

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

<div id="myModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">

  <h2 id="modalTitle">Awesome. I have it.</h2>

  <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>

  <a class="close-reveal-modal" aria-label="Close">&#215;</a>

</div>

 

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

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

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

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

<script>

    $(document).foundation();

</script>

 

</body>

</html>

And here are the files:

 

Brian Tan over 3 years ago

Foundation 6 does not use modernizr nor fastclick, but optionally uses what-input. I clean up your stylesheets and js scripts and change html to foundation 6 syntax.

<!DOCTYPE HTML>
<html>
 <head>
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description"/>
    <meta name="author">

    <!-- Style Sheets -->
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/app.css" />
  </head>

<body>

<a href="#" data-open="myModal">Click Me For A Modal</a>

<div id="myModal" class="reveal" data-reveal >
  <h2 id="modalTitle">Awesome. I have it.</h2>
  <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>
  <a class="close-button" data-close>&#215;</a>
</div>

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

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

</body>
</html>

Clayton King over 2 years ago

I cam across this and have the same problem; even using your markup it's not working. I have both stylesheets attached, but no joy.  I see "Click Me For A Modal," but when clicked the modal doesn't appear.

Eric I. about 2 years ago

..I have exactly the same problem.

neither the example from the documentation nor the one above do work.

 

general bug in foundation 6.4.2 "complete" ??

Dusin almost 2 years ago

Here is the solution,

Paste this into your document.

 

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

 

<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>