Skip to content
Related Articles

Related Articles

Foundation CSS Reveal

View Discussion
Improve Article
Save Article
  • Last Updated : 10 Jun, 2022
View Discussion
Improve Article
Save Article

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=
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </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=
  
    <!-- Compressed JavaScript -->
  <script src=
  </script>
  <script src=
  </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>


Output:

Reference: https://get.foundation/sites/docs/reveal.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!