Foundation CSS Reveal Nested Modal

Last Updated : 02 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.

Reveal is the modal or popup window that is used to show some information when we click the button. We can create a popup window to show some content without navigating to another page. Reveal Nested Modal is used to create the nested modal or pop-up windows and each window can store some content. A modal can open another modal with the help of id and data-open attribute. In this article, we will discuss how to create nested modals in Foundation CSS.

Foundation CSS Reveal Nested Modal Class:

reveal: This class is used to create the modal or pop-up window.

Syntax:

<button class="button" data-open="reveal1">
    Reveal this
</button>

<!-- First modal -->
<div class="reveal" id="reveal1" data-reveal>
    ......
    <button class="button" data-open="reveal2">
        Reveal nested modal
    </button>
</div>

<!-- Nested modal -->
<div class="reveal" id="reveal2" data-reveal>
    ....
</div>

Example 1: The following code demonstrates the Reveal Nested Modal with some content.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3>Foundation CSS Reveal Nested Modal</h3>

        <button class="button" 
                data-open="modal1">
            Reveal first modal</button>
        <div class="reveal" 
             id="modal1" 
             data-reveal>
            <strong>Modal 1</strong> <br>
            
<p>A Computer Science portal for geeks.
               It contains well written, well thought and 
               well explained computer science and 
                programming articles
            </p>

            <button class="button" 
                    data-open="modal2">
              Reveal second modal
            </button>
            <button class="close-button" 
                    data-close type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="reveal" id="modal2" data-reveal>
            <h2>This is Modal 2</h2>
            
<p>With the idea of imparting programming 
               knowledge, Mr. Sandeep Jain, an IIT 
               Roorkee alumnus started a dream, GeeksforGeeks</p>

            <button class="close-button" 
                    data-close
                    type="button">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>

</html>

Output:

Example 2: The following code demonstrates the Reveal Nested Modal with text and images.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
  
    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3>Foundation CSS Reveal Nested Modal</h3>
        <!-- First modal -->
        <button class="button" data-open="modal1">
            Reveal first modal</button>
        <div class="reveal" id="modal1" data-reveal>
            <strong>Modal 1</strong> <br>
            
<p>A Computer Science portal for geeks. 
               It contains well written, well thought 
               and well explained computer science 
               and programming articles</p>

            <button class="button" 
                    data-open="modal2">
              Reveal second modal
            </button>
        </div>

        <!-- Second modal -->
        <div class="reveal" id="modal2" data-reveal>
            <h2>This is Modal 2</h2>
            <img alt="GFG" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">
            <br><br>
            <button class="button" 
                    data-open="modal3">
              Reveal third modal
            </button>
        </div>

        <!-- Third modal  -->
        <div class="reveal" id="modal3" data-reveal>
            <h2>Modal 3</h2>
            <p>This is modal 3</p>
            <button class="button" 
                    data-open="modal4">
              Reveal fourth modal
            </button>
        </div>

        <!-- Fourth modal  -->
        <div class="reveal" id="modal4" data-reveal>
            <h2>This is Modal 4</h2>
            <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3-300x300.png">
            <button class="close-button"
                    data-close 
                    type="button">
                <span aria-hidden="true">
                  &times;
                </span>
            </button>
        </div>
    </center>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>

</html>

Output:

Reference: https://get.foundation/sites/docs/reveal.html#nested-modal

singh_teekam

Improve

Article Tags :

Foundation CSS Reveal Nested Modal

Similar Reads

Thank You!

What kind of Experience do you want to share?