亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

characters

Foundation 模態(tài)框

模態(tài)框是一個顯示在頁面頭部的彈窗。

我們可以在容器元素上(如 <div id="myModal")使用唯一 ID，并添加 .reveal-modal 類和 data-reveal 屬性來添加模態(tài)框。我們可以在任何元素上使用 data-reveal-id="id" 屬性阿里打開模態(tài)框。 ?id 必須與容器 id 一致(實例為 "myModal")。

如果你希望在點擊模態(tài)框之外的區(qū)域來關(guān)閉模態(tài)框。你可以在模態(tài)框的關(guān)閉按鈕 ?<a> 標(biāo)簽上添加 .close-reveal-modal 類來實現(xiàn)。

注意: 滑塊需要使用 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>
實例預(yù)覽 ?

模態(tài)框大小

可以在模態(tài)框容器上添加以下類來設(shè)置模態(tài)框的大?。?/p>

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

注意: 在平板、筆記本、PC 電腦上默認(rèn)為 80% 寬度，在小屏幕設(shè)備上是 100% 寬度。

實例

<div?id="myModal"?class="reveal-modal?tiny|small|medium|large|xlarge|full"?data-reveal>
實例預(yù)覽 ?

內(nèi)嵌模態(tài)框

你可以在模態(tài)框內(nèi)嵌入模態(tài)框，可以在第一個模態(tài)框上添加新的觸發(fā)按鈕。你必須為內(nèi)嵌模態(tài)框設(shè)置一個唯一的 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>
實例預(yù)覽 ?

第二個模態(tài)框會取代第一個模態(tài)框。如果你希望在打開第二個模態(tài)框時，不關(guān)閉第一個模態(tài)框。可以在第二個模態(tài)框上添加 data-options="multiple_opened:true;" 屬性：

實例

<div?id="secondModal"?class="reveal-modal"?data-reveal?data-options="multiple_opened:true;">
實例預(yù)覽 ?


關(guān)于我們 聯(lián)系我們 留言板

手冊網(wǎng)

Previous article： Next article：