kuba2 Posted February 16, 2016 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>
dragan Posted February 16, 2016 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
kuba2 Posted February 16, 2016 Author 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?
Marek Posted February 16, 2016 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
kuba2 Posted February 16, 2016 Author 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
flydev Posted February 16, 2016 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
Recommended Posts