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

<
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
>

<
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：

实例

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

<
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
>

<
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;" 属性：

实例

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

尝试一下 »