Foundation 模态框
模态框是一个显示在页面头部的弹窗。
我们可以在容器元素上(如
<div id="myModal"
)使用唯一 ID,并添加
.reveal-modal
类和
data-reveal
属性来添加模态框。我们可以在任何元素上使用
data-reveal-id="id"
属性阿里打开模态框。
id
必须与容器 id 一致(实例为 "myModal")。
如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮
<a>
标签上添加
.close-reveal-modal
类来实现。
注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation JS:
实例
< 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" > × < /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% 宽度。
实例
尝试一下 »
内嵌模态框
你可以在模态框内嵌入模态框,可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id:
实例
< 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" > × < /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" > × < /a >
< /div >
尝试一下 »
第二个模态框会取代第一个模态框。如果你希望在打开第二个模态框时,不关闭第一个模态框。可以在第二个模态框上添加
data-options="multiple_opened:true;"
属性:
实例
尝试一下 »