Reveal
Responsive Modal Dialogs. It's a beautiful thing.
Basic
You can create a reveal modal using minimal markup.
View CodeHTML Code
<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal" data-reveal>
<h2>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">×</a>
</div>Advanced
Additional classes can be added to your reveal modal to change its appearance.
The class options:
tiny: Set the width to 30%.small: Set the width to 40%.medium: Set the width to 60%.large: Set the width to 70%.xlarge: Set the width to 95%.full: Set the width and height to 100%.unanchored: Modal appears near center of screen on medium sized screens and up.freeze: Prevents the modal from moving as the page is scrolled. With the light class this will vertically center the items.
Here is a modal that uses the unanchored and freeze classes. Notice the use of the
fix-content div. This is how we handle scrolling content when the modal is frozen.
HTML Code
<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal unanchored freeze" data-reveal>
<div class="fix-content">
<h2>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>
</div>
<a class="close-reveal-modal">×</a>
</div>The background element is appended to the end of the body element. If you would like to override this functionality you can add your own Reveal
background anywhere on the page.
<div class="reveal-modal-bg" style="display: none"></div>Light Version
You can create a light reveal modal using minimal markup. The reveal-content wrap will cause the zoom effect and create a max-width of 512px
For a black version of the light format use the class space-black
reveal-content has the class options:
large: Increase the max-width to 1024px.full-width: Remove the max-width and fill the full width of the modal.
HTML Code
<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal light freeze" data-reveal>
<div class="reveal-content" data-reveal>
<h2>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">×</a>
</div>
</div>HTML Code
<a href="#myModal" data-reveal-id="myModal", class="radius button">My Modal</a>
<div id="myModal" class="reveal-modal space-black freeze" data-reveal>
<div class="reveal-content" data-reveal>
<h2>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">×</a>
</div>
</div>Instantiating A Reveal Modal
To instantiate 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.
<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>Use Reveal Events
You can use JavaScript for opening and closing the modal window.
// 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');Firing A Reveal Modal With Ajax Content
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.
<button data-reveal-id="myModal" data-reveal-ajax="http://some-url">
Click Me For A Modal
</button>
<a href="http://some-url" data-reveal-id="myModal" data-reveal-ajax="true">
Click Me For A Modal
</a>Ajax-based Reveal modals can also be opened via JavaScript:
// 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');
}
});Please refer to http://api.jquery.com/jQuery.ajax/ for a complete list of possible parameters.
Event Bindings
There are a series of events that you can bind to for triggering callbacks:
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
});
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
});
$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
});
$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
var modal = $(this);
});This is a modal.
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.
×This is a second modal.
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.
×Third modal.
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.
×