基础 CSS 显示嵌套模式

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面，使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件，可以在任何设备上阅读。 Foundation for Apps 允许您构建完全响应的 Web 应用程序。

Reveal是模式或弹出窗口，用于在我们单击按钮时显示一些信息。我们可以创建一个弹出窗口来显示一些内容，而无需导航到另一个页面。 Reveal Nested Modal用于创建嵌套的模态或弹出窗口，每个窗口可以存储一些内容。一个 modal 可以在 id 和 data-open 属性的帮助下打开另一个 modal。在本文中，我们将讨论如何在 Foundation CSS 中创建嵌套模式。

基础 CSS 显示嵌套模式类：

• reveal ：该类用于创建模态或弹出窗口。

句法：

    Reveal this




    ......
    
        Reveal nested modal
    




    ....

示例 1：以下代码演示了带有一些内容的 Reveal Nested Modal。

HTML

  

    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Reveal Nested Modal
  
        
            Reveal first modal
        
            Modal 1 
              
A Computer Science portal for geeks.
               It contains well written, well thought and 
               well explained computer science and 
                programming articles
            
  
            
              Reveal second modal
            
            
                ×
            
        
  
        
            This is Modal 2
              
With the idea of imparting programming 
               knowledge, Mr. Sandeep Jain, an IIT 
               Roorkee alumnus started a dream, GeeksforGeeks
  
            
                ×
            
        
    
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

示例 2：以下代码演示了带有文本和图像的 Reveal Nested Modal。

HTML

  

    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        Foundation CSS Reveal Nested Modal
        
        
            Reveal first modal
        
            Modal 1 
              
A Computer Science portal for geeks. 
               It contains well written, well thought 
               and well explained computer science 
               and programming articles
  
            
              Reveal second modal
            
        
  
        
        
            This is Modal 2
            
            
            
              Reveal third modal
            
        
  
        
        
            Modal 3
            This is modal 3
            
              Reveal fourth modal
            
        
  
        
        
            This is Modal 4
            
            
                
                  ×
                
            
        
    
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

参考： https://get.foundation/sites/docs/reveal.html#nested-modal