Foundation CSS Reveal

The Foundation CSS Reveal component allows you to create modal dialogs or popovers that reveal additional content or actions when triggered. It's commonly used for displaying notifications, alerts, or interactive overlays on web pages. Here's how to create a Reveal using Foundation CSS:

1. HTML Structure

Define the HTML structure for the Reveal component by wrapping the trigger element and the content to be revealed within a <div> element with the class reveal. The trigger element can be a button, link, or any clickable element that activates the Reveal.

Within the Reveal container, include the content to be revealed with the appropriate classes (e.g., reveal-content for the main content and close-button for a close button). You can customize the appearance and behavior of the Reveal using additional classes such as full for a full-width Reveal or large for a larger Reveal modal.

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Modal Title</h1>
  <p>Any content could go in here.</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

<button class="button" data-open="exampleModal1">Click me for a modal</button>

2. Example

Here's an example of a basic Reveal modal implemented using Foundation CSS:

<div class="reveal" id="exampleModal1" data-reveal>
  <h1>Modal Title</h1>
  <p>Any content could go in here.</p>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">×</span>
  </button>
</div>

<button class="button" data-open="exampleModal1">Click me for a modal</button>

Conclusion

The Foundation CSS Reveal component provides a simple and flexible way to create modal dialogs or popovers that reveal additional content or actions on your website. By following the HTML structure and applying appropriate classes, you can easily implement Reveal modals to enhance user interaction and provide a better user experience.

Archive