Jump to content

Reveal Modal not working in Foundation 6


kuba2
 Share

Recommended Posts

Hi there

I'm trying to get Reveal Modal ( Pop Up Window ) in Foundation 6 working, but somehow I am not able to do so. Can anybody please tell me what is wrong with my Code?

I guess I am not seeing the obvious once again

Many Thanks

Jakob

 

The following code has just the Reveal Modal code for clarity:

<!doctype html>
<html class="no-js" lang="en">
  <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 | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>



        <!-- ____________REVEAL MODAL________________ -->

    
<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">×</a>
</div>
          <!-- ____________END REVEAL MODAL________________ -->



        




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

    <!-- ____________REVEAL MODAL SCRIPT________________ -->

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

  </body>
</html>
Link to comment
Share on other sites

Did you really include all these libraries? http://foundation.zurb.com/sites/docs/reveal.html#js-module

The file foundation.reveal.js must be included in your JavaScript to use this plugin, along with foundation.core.js. This plugin also requires these utility libraries:
 
foundation.util.keyboard.js
foundation.util.box.js
foundation.util.triggers.js
foundation.util.mediaQuery.js
foundation.util.motion.js
  • Like 1
Link to comment
Share on other sites

Hi there...I feel very stupid!

Thanks

....

Merci for the help!!!!

A last thing. I got it working, so far so good!

But I would like to make it open automatically, when the page loads.....

What sort of script do I have to add?

Thanks a bunch

Jakob

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...