Foundation 模态框

模态框是一个显示在页面头部的弹窗。

我们可以在容器元素上(如

)使用唯一 ID，并添加.reveal-modal类和data-reveal属性来添加模态框。我们可以在任何元素上使用data-reveal-id="id"属性阿里打开模态框。id必须与容器 id 一致(实例为 "myModal")。
          如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮标签上添加.close-reveal-modal类来实现。

          注意:滑块需要使用 JavaScript。所以你需要初始化 oundation JS:
          
           实例
               Heading in Modal.
 Some text in the modal.
 Some text in the modal.
 × 
  实例预览 »
          
          
          模态框大小
          可以在模态框容器上添加以下类来设置模态框的大小：
          
           .tiny: 30% 宽度
           .small: 40% 宽度
           .medium: 60% 宽度
           .large: 70% 宽度
           .xlarge: 95% 宽度
           .full: 100% 宽度和高度
          
          注意:在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。
          
           实例
           实例预览 »
          
          
          内嵌模态框
          你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：
          
           实例
            Click To Open Modal   First Modal
 Some text..
 Open Second Modal
 × 
   Tada! Second Modal
 Some text..
 × 实例预览 »
          
          第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加data-options="multiple_opened:true;"属性：
          
           实例
           实例预览 »


         
          关于我们 联系我们 留言板
          手册网


        
         
          Previous article：
          Next article：


  
  
   
    简体中文(ZH-CN)
    English(EN)
    繁体中文(ZH-TW)
    日本語(JA)
    한국어(KO)
    Melayu(MS)
    Français(FR)
    Deutsch(DE)