Foundation CSS Reveal Basics
Last Updated :
02 Mar, 2022
The 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. We can use the reveal class to create the popup window in Foundation CSS.
Foundation CSS Reveal Basics Class:
- reveal: This class is used to create the popup window.
Syntax:
<div class="reveal" id="revealExample" data-reveal>
....
</div>
<button class="button" data-open="revealExample">
.....
</button>
Example 1: The following code demonstrates the Reveal Basics with some content.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Basics</h3>
<div class="reveal" id="revealContent" 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>
</div>
<button class="button" data-open="revealContent">
Reveal this
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Reveal Basics with images and a close button.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Basics</h3>
<div class="reveal"
id="revealContent" data-reveal>
<strong>GeeksforGeeks Image</strong> <br>
<img alt="GFG" src=
<img src=
<button class="close-button"
data-close type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<button class="button" data-open="revealContent">
Reveal this
</button>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/reveal.html#basics
Share your thoughts in the comments
Please Login to comment...