Foundation CSS Reveal

Last Updated : 10 Jun, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications. Reveal is the modal or popup window that is used to show some information when we click the button. We can show the content in the popup window without navigating to another page.

Foundation CSS Reveal topics:

Basics: We will see how to create the simple modal.
Sizing: We will create different sizes of modals.
Nested Modal: We will create the nested modals.
Full-screen: We will create the full-screen modal.

Foundation CSS Reveal Classes:

reveal: This class is used to create the modal.
tiny: This class is used to create a 30% wide modal.
small: This class is used to create a 50% wide modal.
large: This class is used to create a 90% wide modal.
full: This class is used to create a full-screen modal.

Syntax:

<div class="reveal" id="revealThis" data-reveal>
    .....
</div>
<button class="button" data-open="revealThis">
    .....
</button>

Example 1: The following code demonstrates the Foundation CSS Reveal Basics and Sizing.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
      GeeksforGeeks 
    </h2> 
    <h3>Foundation CSS Reveal</h3> 
  
    <strong> 
      Reveal Basics: 
    </strong> <br> 
    <div class="reveal" id="reveal1" data-reveal> 
      <strong> 
        GeeksforGeeks 
      </strong> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
    </div> 
    <button class="button" data-open="reveal1"> 
      Reveal Basics 
    </button> <br> <br> 
  
    <strong> 
      Reveal Sizing: 
    </strong> <br> 
    <div class="tiny reveal" id="reveal2" data-reveal> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
    </div> 
    <button class="button" data-open="reveal2"> 
      Reveal Tiny 
    </button> 
  
    <div class="small reveal" id="reveal3" data-reveal> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
    </div> 
    <button class="button" data-open="reveal3"> 
      Reveal Small 
    </button> 
  
    <div class="large reveal" id="reveal4" data-reveal> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
    </div> 
    <button class="button" data-open="reveal4"> 
      Reveal Large 
    </button> 
  </center> 
  <script> 
    $(document).foundation(); 
  </script> 
</body> 
</html>

Output:

Example 2: The following code demonstrates the Foundation CSS Reveal Nested Modal and Full-screen Modal.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- Compressed CSS -->
  <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
  </script> 
  <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> 
  </script> 
</head> 
  
<body> 
  <center> 
    <h2 style="color: green;"> 
      GeeksforGeeks 
    </h2> 
    <h3>Foundation CSS Reveal</h3> 
  
    <strong> 
      Reveal Nested Modal: 
    </strong> <br> 
    <div class="reveal" id="reveal1" data-reveal> 
      <strong> 
        GeeksforGeeks 
      </strong> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
  
      <button class="button" 
              data-open="reveal2"> 
        Reveal second modal 
      </button> 
    </div> 
    <button class="button" data-open="reveal1"> 
      Reveal Nested 
    </button> <br> <br> 
  
    <div class="reveal" id="reveal2" data-reveal> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
  
      <button class="close-button" 
              data-close 
              type="button"> 
        <span aria-hidden="true">×</span> 
      </button> 
    </div> 
  
    <strong> 
      Reveal Full-screen: 
    </strong> <br> 
    <div class="full reveal" id="reveal3" data-reveal> 
      <strong> 
        Reveal Full-screen 
      </strong> 
      <p> 
        A Computer Science portal for geeks. 
        It contains well written, well thought 
        and well explained computer science and 
        programming articles 
      </p> 
  
  
      <button class="close-button" 
              data-close  
              type="button"> 
        <span aria-hidden="true">×</span> 
      </button> 
    </div> 
  
    <button class="button" data-open="reveal3"> 
      Reveal Full-screen 
    </button> 
      
  </center> 
  <script> 
    $(document).foundation(); 
  </script> 
</body> 
</html>