Skip to content
Related Articles

Related Articles

Foundation CSS Close Button

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Mar, 2022
View Discussion
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!