Foundation CSS Reveal Advanced Options
Last Updated :
30 Jun, 2022
Foundation CSS is an open-source front-end framework that is used to create a beautiful responsive website, apps, or email quickly and easily. ZURB published it in September of that year. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, make use of it. This framework, which resembles SaaS, is built on the Bootstrap framework. It is more intricate, flexible, and individualized. Working with module bundlers is also a breeze because of its command-line interface. Email framework creates HTML emails that are viewable on all devices and are mobile-friendly. With Foundation for Apps, you can make fully responsive web applications.
The Reveal modal or popup window, which contains some information, emerges when we click the button. The information in the popup window can be viewed without switching to another page. The advanced options provided by Reveal is provided No Overlays and Animations.
No Overlay is the feature where there is no mask on the background by using an attribute only. Animations can be added to the opening and closing of the reveal modal by adding data-animation-in and data-animation-out attributes. We don’t need any specific class to apply these advanced options.
Foundation CSS Reveal Advanced Options Attributes:
No Overlay:
- data-overlay: This attribute is used to toggle the Overlay of the background of the modal. The value of this attribute needs to be set to false to apply the No Overlay option.
Syntax:
<button class="button"
data-toggle="exampleModal">. .</button>
<div class="reveal" id="exampleModal"
data-reveal data-overlay="false">
...
<button class="close-button" data-close> </button>
</div>
Animations:
- data-animation-in: This attribute is used to specify the animation by which the modal will open. The values of this attribute are transitions of the Motion UI library.
- data-animation-out: This attribute is used to specify the animation by which the modal will close. The values of this attribute are transitions of the Motion UI library.
Syntax:
<button class="button"
data-toggle="exampleModal">. .</button>
<div class="reveal" id="exampleModal"
data-reveal data-animation-in="..."
data-animation-out="...">
...
<button class="close-button" data-close> </button>
</div>
Example 1: The code below is used to show the no overlay option using the data-overlay attribute.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Advanced Options</h3>
<p><button class="button"
data-toggle="exampleModal">
Click me for a modal
</button>
</p>
</center>
<div class="reveal" id="exampleModal"
aria-labelledby="exampleModalLabel1"
data-reveal data-overlay="false">
<h1 id="exampleModalLabel1">
GeeksforGeeks
</h1>
<strong>About Us!</strong>
<p class="lead">
A Computer Science portal for geeks.
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks. Billions of
Users, Millions of Articles Published,
Thousands Got Hired by Top Companies
and the numbers are still growing. We
provide a variety of services for you
to learn, thrive and also have fun!
</p>
<button class="close-button"
data-close aria-label="Close Accessible Modal"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: The code below demonstrates how to add animations to a modal using the data-animation-in and data-animation-out attributes.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Reveal Advanced Options</h3>
<p><button class="button"
data-toggle="exampleModal">
Click me for a modal
</button>
</p>
</center>
<div class="reveal" id="exampleModal"
aria-labelledby="exampleModalLabel1"
data-reveal data-close-on-click="true"
data-animation-in="spin-in"
data-animation-out="spin-out">
<h1 id="exampleModalLabel1">
GeeksforGeeks
</h1>
<strong>About Us!</strong>
<p class="lead">
A Computer Science portal for geeks.
Gain and share your knowledge & skills
with a variety of learning platforms
offered by GeeksforGeeks. Billions
of Users, Millions of Articles Published,
Thousands Got Hired by Top Companies and
the numbers are still growing. We provide
a variety of services for you to learn,
thrive and also have fun!
</p>
<button class="close-button"
data-close aria-label="Close Accessible Modal"
type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/reveal.html#advanced-options
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...