Reveal modals are easy to build, just make sure they live right above your closing body tag or they won't work properly. Follow the markup below to get started:
Your couch. It is mine.
Im a cool paragraph that lives inside of an even cooler modal. Wins
×The class options:
small: Set the width to 30%.medium: Set the width to 40%.large: Set the width to 60%.xlarge: Set the width to 70%.expand: Set the width to 95%.For these styles to come across, make sure you have the default Foundation CSS package or that you've selected reveal from a custom package. These should be linked up following our default HTML page structure.
To launch a modal, just add a data-reveal-id to the object which you want to fire the modal when clicked. The data-reveal-id needs to match the id of your reveal.
You can also open and close Reveal via JavaScript:
<%= code_example " // trigger by event $('a.reveal-link').trigger('click'); $('a.close-reveal-modal').trigger('click'); // or directly on the modal $('#myModal').foundation('reveal', 'open'); $('#myModal').foundation('reveal', 'close'); ", :js %>To launch a modal with content from another page, just add a data-reveal-ajax attribute pointing to the url of that page. When clicked, the Reveal modal will be opened with a content from that page. Beware, that content of the object from data-reveal-id attribute will be overwritten as a result.
To use an url from href attribute just add data-reveal-ajax="true" instead.
Ajax-based Reveal modals can also be opened via JavaScript:
<%= code_example " // just an url $('#myModal').foundation('reveal', 'open', 'http://some-url'); // url with extra parameters $('#myModal').foundation('reveal', 'open', { url: 'http://some-url', data: {param1: 'value1', param2: 'value2'} }); // url with custom callbacks $('#myModal').foundation('reveal', 'open', { url: 'http://some-url', success: function(data) { alert('modal data loaded'); }, error: function() { alert('failed loading modal'); } }); ", :js %>Please refer to http://api.jquery.com/jQuery.ajax/ for a complete list of possible parameters.
We've included SCSS mixins used to style reveal. To use these mixins, you'll need to have the extension installed or grab _variables.scss, _global.scss and _reveal.scss from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:
<%= code_example ' @import "foundation/variables", "foundation/components/global", "foundation/components/reveal"; ', :css %>If you are using the mixins, you may include the styles on whatever class or ID you'd like, just make sure you follow our markup structure:
<%= code_example ' ', :html %>The first mixin you'll need to setup when using Reveal through SCSS is the background cover. This is what fades out the rest of the page to help show the modal. The container mixin looks like this:
<%= code_example ' .reveal-modal-bg { @include reveal-bg; }', :css %>This mixin is used to set the basic styles for positioning, visibility and a few other necessities. This mixin also gives you the ability to set the width of the modal. The mixin looks like this:
<%= code_example ' .your-modal-class { @include reveal-modal-base($base-style, $width); } /* Control whether or not base styles are included, defaults to "true" */ $base-style: true; /* Control the width of each modal, defaults to 80% */ $width: $reveal-default-width; ', :css %>This mixin gives you access to changing the background color, borders, shadows, and offsets. You can create lots of different modals with this mixin. Here's what the mixin looks like:
<%= code_example ' .your-modal-class { @include reveal-modal-style($bg, $padding, $border, $border-style, $border-width, $border-color, $box-shadow, $top-offset); } /* Set this to a color to change the background of the modal */ $bg: $reveal-modal-bg; /* Padding around content inside the modals */ $padding: $reveal-modal-padding; /* Control whether or not you want a border */ $border: true; /* If you set border to "true", this controls border style */ $border-style: $reveal-border-style; /* If you set border to "true", this controls border width */ $border-width: $reveal-border-width; /* If you set border to "true", this controls border color */ $border-color: $reveal-border-color; /* Control whether or not you want box-shadows */ $box-shadow: true; /* Set how far from the top you want your modal to sit */ $top-offset: $reveal-position-top; ', :css %>One important aspect we musn't forget is the close button. We've given you a mixin that will help style the button, it looks like this:
<%= code_example ' .your-modal-close-class { @include reveal-close($color); } /* Change the color of the close button */ $color: $reveal-close-color; ', :css %>Note: emCalc(); is a function we wrote to convert px to em. It is included in _variables.scss.
You don't need this JS to create reveal modals with Foundation. The only reason you'll need to include foundation.reveal.js is if you want to add the ability to close an alert. You'll also need to make sure to include zepto.js and foundation.js above the alert plugin. Above your closing </body> tag include the following line of code and make sure you have the JS in your directory.
Read how to install Foundation JavaScript
Required Foundation Library: foundation.reveal.js
Reveal options can only be passed in during initialization at this time. However, you can bind to the open, opened, close, and closed events.
<%= code_example " { animation: 'fadeAndPop', animationSpeed: 250, closeOnBackgroundClick: true, dismissModalClass: 'close-reveal-modal', bgClass: 'reveal-modal-bg', open: function(){}, opened: function(){}, close: function(){}, closed: function(){}, bg : $('.reveal-modal-bg'), css : { open : { 'opacity': 0, 'visibility': 'visible', 'display' : 'block' }, close : { 'opacity': 1, 'visibility': 'hidden', 'display': 'none' } } }", :js %>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.
Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.
×See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.
×