kuba2 Posted February 16, 2016 Share Posted February 16, 2016 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 More sharing options...
dragan Posted February 16, 2016 Share Posted February 16, 2016 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 1 Link to comment Share on other sites More sharing options...
kuba2 Posted February 16, 2016 Author Share Posted February 16, 2016 Aren't they in the foundation.js?Have to look Thanks! I am using this link: http://foundation.zurb.com/sites/docs/v/5.5.3/components/reveal.html Is it possible, that Yours goes to Foundation 5? Link to comment Share on other sites More sharing options...
Marek Posted February 16, 2016 Share Posted February 16, 2016 kuba you are linking to documentation for foundation 5. you need to build it like here http://foundation.zurb.com/sites/docs/reveal.html if you have downloaded foundation 6 1 Link to comment Share on other sites More sharing options...
kuba2 Posted February 16, 2016 Author Share Posted February 16, 2016 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 More sharing options...
flydev Posted February 16, 2016 Share Posted February 16, 2016 A simple call with the right option should do the trick : $(document).ready(function(){ var popup = new Foundation.Reveal($('#myModal')); popup.open(); }); the docs : http://foundation.zurb.com/sites/docs/reveal.html 1 Link to comment Share on other sites More sharing options...
Recommended Posts