免費(fèi)AI編程助手
Foundation 模態(tài)框
2022-08-05 15:41 更新
模態(tài)框是一個(gè)顯示在頁面頭部的彈窗。
我們可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 類和 data-reveal 屬性來添加模態(tài)框。我們可以在任何元素上使用 data-reveal-id="id" 屬性阿里打開模態(tài)框。 id 必須與容器 id 一致(實(shí)例為 "myModal")。
如果你希望在點(diǎn)擊模態(tài)框之外的區(qū)域來關(guān)閉模態(tài)框。你可以在模態(tài)框的關(guān)閉按鈕 <a> 標(biāo)簽上添加 .close-reveal-modal 類來實(shí)現(xiàn)。
注意: 滑塊需要使用 JavaScript。所以你需要初始化oundation JS:
實(shí)例
<!-- 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>
嘗試一下 ?
模態(tài)框大小
可以在模態(tài)框容器上添加以下類來設(shè)置模態(tài)框的大小：
.tiny: 30% 寬度.small: 40% 寬度.medium: 60% 寬度.large: 70% 寬度.xlarge: 95% 寬度.full: 100% 寬度和高度
注意: 在平板、筆記本、PC 電腦上默認(rèn)為 80% 寬度，在小屏幕設(shè)備上是 100% 寬度。
實(shí)例
<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full"
data-reveal>
嘗試一下 ?
內(nèi)嵌模態(tài)框
你可以在模態(tài)框內(nèi)嵌入模態(tài)框，可以在第一個(gè)模態(tài)框上添加新的觸發(fā)按鈕。你必須為內(nèi)嵌模態(tài)框設(shè)置一個(gè)唯一的 id：
實(shí)例
<!-- 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>
嘗試一下 ?
第二個(gè)模態(tài)框會(huì)取代第一個(gè)模態(tài)框。如果你希望在打開第二個(gè)模態(tài)框時(shí)，不關(guān)閉第一個(gè)模態(tài)框。可以在第二個(gè)模態(tài)框上添加 data-options="multiple_opened:true;" 屬性：
實(shí)例
<div id="secondModal" class="reveal-modal" data-reveal data-options=
"multiple_opened:true;">
嘗試一下 ?
以上內(nèi)容是否對您有幫助：
更多建議：