Zurb Foundation 4 has a nice Reveal plugin that makes it very easy to create modal windows.

You may also have already noticed that there's an option (enabled by default) to display Drupal status messages in a reveal modal.

Creating your own reveal modals

Fortunately, we've made it very simple for you to create your own reveal modals, by implementing the zurb_foundation_reveal theme function:

  // As a render array.
  $build = array(
    '#theme' => 'zurb_foundation_reveal',
    '#text' => 'Click me!',
    '#reveal' => 'Hello from Zurb Foundation reveal!',
  );

  return drupal_render($build);

  // Directly as a theme callback.
  return theme('zurb_foundation_reveal', array(
    'text' => 'Click me!',
    'reveal' => 'Hello from Zurb Foundation reveal!'
  ));

The zurb_foundation_reveal theme function accepts the following arguments:

• text The text to display in the link.
• reveal The content that goes in the reveal modal. Can either be a string or a render array.
• html Whether the text uses HTML.
• ajax Whether the reveal uses AJAX content (see below for more AJAX info).
• path The path for the link's href property. This is only really useful for AJAX (see below for more AJAX info).
• link_classes_array Extra classes to add to the link.
• reveal_classes_array Extra classes to add to the reveal modal. These are particularly useful for specifying how wide the modal is (see below).

This theme function makes sure that the markup for the reveal modals is placed at the bottom of the page, as per the Zurb Foundation guidelines and also ensures that each modal gets a unique ID.

Using AJAX for modal content

Dynamically populating a reveal modal with content loaded via AJAX is very simple. You can do it in 2 different ways:

1. Specify the url from where the content will be loaded in the 'path' parameter and set the 'ajax' parameter to TRUE
2. Specify the url from where the content will be loaded directly in the 'ajax' parameter

The only reason there are 2 methods for this is to maintain compatibility with the Zurb Foundation Reveal api.

Examples:

  // Method one.
  return theme('zurb_foundation_reveal', array(
    'text' => 'Click me!',
    'path' => 'http://example.com',
    'ajax' => TRUE,
  ));

  // Method two.
  return theme('zurb_foundation_reveal', array(
    'text' => 'Click me!',
    'ajax' => 'http://example.com',
  ));

For more information please refer to the Zurb Foundation Reveal documentation

Modal Width

By default, all modals get the "expand" class but you can easily change by passing parameters to the theme function. The following other sizes are available:

• 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%.

Please refer to the official Zurb Foundation documentation for more information on customising reveal modals and please feel free to submit new feature requests for additional functionality you'd like to see.