Foundation CSS Kitchen Sink Reveal
Last Updated :
28 Feb, 2022
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Kitchen Sink Reveal is used to show the content in a pop-up window when the link is clicked. When we want to hide the content and again show it then we can use this reveal class in Foundation CSS.
Foundation CSS Kitchen Sink Reveal class:
- reveal: It is used to create the pop-up window.
Syntax:
<p><a data-open="revealText">....</a></p>
<div class="reveal" id="revealText" data-reveal>
....
</div>
Example 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Reveal</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Reveal</h3>
<p><a data-open="revealExample">Click Here</a></p>
<div class="reveal"
id="revealExample"
data-reveal>
<h1>GeeksforGeeks</h1>
<p class="lead">
A Computer Science portal for geeks.
It contains well written, well thought
and well explained
computer science and programming articles</p>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science
and programming articles</p>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Reveal
Example 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Kitchen Sink Reveal</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Kitchen Sink Reveal</h3>
<p><a data-open="revealExample">Click me</a></p>
<div class="reveal" id="revealExample" data-reveal>
<h1>GeeksforGeeks</h1> <br>
<img src=
alt="GFG image">
<strong>GeeksforGeeks Image</strong> <br> <br>
<input type="text" name="" id="" placeholder="Enter your name">
<button class="primary button">Submit</button>
<button class="close-button" data-close aria-label="Close reveal"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Kitchen Sink Reveal
Reference link: https://get.foundation/sites/docs/kitchen-sink.html#reveal
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...