Foundation CSS Reveal Nested Modal
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/foundation-sites@6.7.4/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/foundation-sites@6.5.1/dist/js/foundation.min.js" > </ script > </ head > < body > < center > < h2 style = "color: green;" > w3wiki </ 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 Beginner. 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" >×</ 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, w3wiki</ p > < button class = "close-button" data-close type = "button" > < span aria-hidden = "true" >×</ 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/foundation-sites@6.7.4/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/foundation-sites@6.5.1/dist/js/foundation.min.js" > </ script > </ head > < body > < center > < h2 style = "color: green;" > w3wiki </ 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 Beginner. 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.w3wiki.net/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.w3wiki.net/wp-content/uploads/20210915115837/gfg3-300x300.png" > < button class = "close-button" data-close type = "button" > < span aria-hidden = "true" > × </ span > </ button > </ div > </ center > < script > $(document).ready(function () { $(document).foundation(); }) </ script > </ body > </ html > |
Output:
Reference: https://get.foundation/sites/docs/reveal.html#nested-modal