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.

Output:

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

Output: 

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