Foundation CSS Reveal Full-screen

Last Updated : 22 Mar, 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. Reveal Full-screen is used to show the modal in full screen using the .full class. In this article, we will discuss Reveal Full-screen in Foundation CSS.

Foundation CSS Reveal Full-screen Class:

full: This class is used to create the full-screen modal.

Syntax:

<div class="full reveal" data-reveal>
    ...
</div>

Example 1: The following code demonstrates the Foundation CSS Reveal Full-screen with some content.

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 Full-screen</h3> 
  
    <div class="full reveal" id="fullreveal" data-reveal> 
      <strong>GeeksforGeeks</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  
              aria-label="Close" 
              type="button"> 
        <span aria-hidden="true">×</span> 
      </button> 
    </div> 
  
    <button class="button" data-open="fullreveal"> 
      Reveal 
    </button> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
</html>

Output:

Example 2: The following code demonstrates the Foundation CSS Reveal Full-screen with an image and content.

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 Full-screen</h3> 
  
    <div class="full reveal" id="fullreveal" data-reveal> 
      <strong>GeeksforGeeks</strong> 
      <p> 
        A Computer Science portal for geeks. 
      </p> 
  
      <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
  
      <button class="close-button" 
              data-close  
              aria-label="Close" 
              type="button"> 
        <span aria-hidden="true">×</span> 
      </button> 
    </div> 
  
    <button class="button" data-open="fullreveal"> 
      Reveal 
    </button> 
  </center> 
  
  <script> 
    $(document).ready(function () { 
      $(document).foundation(); 
    }) 
  </script> 
</body> 
</html>