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" > × < /a >
< /div >
<!-- Initialize Foundation JS -->
< script >
$(document).ready(function() {
$(document).foundation();
})
< /script >
< 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%寬度。
實例
< 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" > × < /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 >
< 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;"
屬性:
實例
< div id= "secondModal" class= "reveal-modal" data-reveal data-options= "multiple_opened:true;" >
嘗試一下»