Foundation 4 Documentation

Reveal

Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.

Build With HTML Classes

Reveal modals are easy to build. They should live right above your closing body tag, but if they are nested within the document, Reveal will temporarily relocate them while open to ensure proper positioning. Follow the markup below to get started:

<div id="myModal" class="reveal-modal">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

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.

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; this will allow you to style if if your scope is smaller than the body of the page.

<div class="reveal-modal-bg" style="display: none"></div>

Firing a Reveal Modal

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.

<a href="#" data-reveal-id="myModal">Click Me For A Modal</a>

You can also open and close Reveal via JavaScript:

// 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.

Build with Mixins

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:

@import "foundation/variables";
@import "foundation/components/global";
@import "foundation/components/reveal";

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:

<div id="myModalID" class="your-class">
  <h2>This is a modal.</h2>
  <p>Some text...</p>
  <a class="your-close-class">&times;</a>
</div>

Background Mixin

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:

.reveal-modal-bg { @include reveal-bg; }

Base Mixin

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:

.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;

Style Mixin

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:

.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;

The Close Button Mixin

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:

.your-modal-close-class { @include reveal-close($color); }

/* Change the color of the close button */
$color: $reveal-close-color;

Default SCSS Variables

$include-html-reveal-classes: $include-html-classes;

/* We use these to control the style of the reveal overlay. */
$reveal-overlay-bg: rgba(#000, .45);
$reveal-overlay-bg-old: #000;

/* We use these to control the style of the modal itself. */
$reveal-modal-bg: #fff;
$reveal-position-top: 50px;
$reveal-default-width: 80%;
$reveal-modal-padding: em-calc(20);
$reveal-box-shadow: 0 0 10px rgba(#000,.4);

/* We use these to style the reveal close button */
$reveal-close-font-size: em-calc(22);
$reveal-close-top: em-calc(8);
$reveal-close-side: em-calc(11);
$reveal-close-color: #aaa;
$reveal-close-weight: bold;

/* We use these to control the modal border */
$reveal-border-style: solid;
$reveal-border-width: 1px;
$reveal-border-color: #666;

$reveal-modal-class: "reveal-modal";
$close-reveal-modal-class: "close-reveal-modal";

Note: em-calc(); is a function we wrote to convert px to em. It is included in _variables.scss.

Using the JavaScript

Just add foundation.reveal.js AFTER the foundation.js file. Your markup should look something like this:

<body>

  ...

  <script>
      document.write('<script src=/js/vendor/'
        + ('__proto__' in {} ? 'zepto' : 'jquery')
        + '.js><\/script>');
    </script>

  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.reveal.js"></script>
  <!-- Other JS plugins can be included here -->

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

</body>
        

Required Foundation Library: foundation.reveal.js

Optional JavaScript Configuration

Reveal options can only be passed in during initialization at this time. However, you can bind to the open, opened, close, and closed events.

{
  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'
    }
  }
}