Open In App

Foundation CSS Close Button

Last Updated : 21 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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 (&times;) 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



Previous Article
Next Article

Similar Reads

Foundation CSS Kitchen Sink Close Button
Foundation CSS is an open-source &amp; responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily cus
2 min read
Foundation CSS Close Button Sass Reference
Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011. It 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. I
3 min read
Design a close button using Pure CSS
The task is to make the close button using Pure CSS. There are two approaches that are discussed below. Approach 1: Create a &lt;div&gt; inside another &lt;div&gt; which has alphabet 'X' in it which helps in displaying the close button. When the "click" event occurs on 'X', then perform the operation. In this example the outer &lt;div&gt; has been
2 min read
How to remove close button from jQuery UI dialog using CSS ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using CSS. This can be achieved by setting the display property of the ui-dialog-titlebar-close class element to none. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog b
3 min read
Foundation CSS Button Group Split
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read
Foundation CSS Button Disabled
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
4 min read
Foundation CSS Button Hollow Style
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
2 min read
Foundation CSS Button Clear Style
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read
Foundation CSS Button Dropdown Arrows
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read
Foundation CSS Button Group Sizing
Foundation CSS is an open-source &amp; responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing &amp; can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is
3 min read