Foundation CSS Close Button
Last Updated :
21 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.
The Close Button is used to provide an option to dismiss or close the component. It is a <button> element with the class .close-button. The multiplication symbol (×) is used as the graphical icon(X). This icon is declared inside the <span> element with the attribute aria-hidden=”true”. The aria-label attribute labeled with a button can be used to clarify for what the button’s purpose is.
Foundation CSS Close Button Class:
- callout: It is used to create the callout to put any type of content.
- close-button: This class is used to create a close button on the screen.
Syntax:
<div class="callout">
<button class="close-button" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
Example: This example describes the Foundation CSS Close Button.
HTML
<html>
<head>
<title>
Foundation CSS Close Button
</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h2>Foundation CSS Close Button</h2>
<p>
Click on the "x" symbol to the right
of the list item to close/hide it.
</p>
<ul>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>This is an example of close button!</p>
</div>
</ul>
<script>
var closebtns =
document.getElementsByClassName("close-button");
var i;
for(i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = "none";
});
}
</script>
</body>
</html>
|
Output:
Example: This example describes the Foundation CSS Multiple Close Button.
HTML
<html>
<head>
<title>Foundation CSS Close Button</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Foundation CSS Close Button</h3>
<p>
Click on the "x" symbol to the
right of the list item to close/hide it.
</p>
<ul>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Fruits</p>
</div>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Vegetables</p>
</div>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Grocery</p>
</div>
<div class="callout">
<button class="close-button"
aria-label="Close alert"
type="button">
<span aria-hidden="true">×</span>
</button>
<p>Stationery</p>
</div>
</ul>
<script>
var closebtns =
document.getElementsByClassName("close-button");
var i;
for(i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = "none";
});
}
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/close-button.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...