Foundation 模态框

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

我们可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id="id" 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 "myModal")。

如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。

注意: 滑块需要使用 JavaScript。所以你需要初始化 oundation JS:

实例

<!-- Trigger the Modal -->
< button  type= "button"  class= "button"  data-reveal-id= "myModal" >Click To Open Modal < /button >

<!-- The Modal Content -->
< div  id= "myModal"  class= "reveal-modal"  data-reveal >
   < h2 >Heading in Modal. < /h2 >
   < p >Some text in the modal. < /p >
   < p >Some text in the modal. < /p >
   < a  class= "close-reveal-modal" >&times; < /a >
< /div >

<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
    $(document).foundation();
})
< /script >

尝试一下 »

模态框大小

可以在模态框容器上添加以下类来设置模态框的大小：

  • .tiny: 30% 宽度
  • .small: 40% 宽度
  • .medium: 60% 宽度
  • .large: 70% 宽度
  • .xlarge: 95% 宽度
  • .full: 100% 宽度和高度

注意: 在平板、笔记本、PC 电脑上默认为 80% 宽度，在小屏幕设备上是 100% 宽度。

实例

< div  id= "myModal"  class= "reveal-modal tiny|small|medium|large|xlarge|full"  data-reveal >

尝试一下 »

内嵌模态框

你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：

实例

<!-- Trigger the modal -->
< a  href= "#"  class= "button"  data-reveal-id= "myModal" >Click To Open Modal < /a >

<!-- The First Modal -->
< div  id= "myModal"  class= "reveal-modal"  data-reveal >
   < h2 >First Modal < /h2 >
   < p >Some text.. < /p >
   < p > < a  href= "#"  data-reveal-id= "secondModal"  class= "button" >Open Second Modal < /a > < /p >
   < a  class= "close-reveal-modal" >&times; < /a >
< /div >

<!-- The Second Modal -->
< div  id= "secondModal"  class= "reveal-modal"  data-reveal >
   < h2 >Tada! Second Modal < /h2 >
   < p >Some text.. < /p >
   < a  class= "close-reveal-modal" >&times; < /a >
< /div >

尝试一下 »

第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时，不关闭第一个模态框。可以在第二个模态框上添加data-options="multiple_opened:true;" 属性：

实例

< div  id= "secondModal"  class= "reveal-modal"  data-reveal data-options= "multiple_opened:true;" >

尝试一下 »