Foundation 模态框教程
1、我们可以在容器元素上(如<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 --><buttontype="button"class="button"data-reveal-id="myModal">Click To Open Modal</button><!-- The Modal Content --><divid="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><aclass="close-reveal-modal">×</a></div><!-- Initialize Foundation JS --><script>$(document).ready(function() { $(document).foundation();})</script>
3、内嵌模态框你可以在模态框内嵌入模态框，可以在第一个模态框上添加新的触发按钮。你必须为内嵌模态框设置一个唯一的 id：实例<!幻腾寂埒-- Trigger the modal --><ahref="#"class="button"data-reveal-id="myModal">Click To Open Modal</a><!-- The First Modal --><divid="myModal"class="reveal-modal"data-reveal><h2>First Modal</h2><p>Some text..</p><p><ahref="#"data-reveal-id="secondModal"class="button">Open Second Modal</a></p><aclass="close-reveal-modal">×</a></div><!-- The Second Modal --><divid="secondModal"class="reveal-modal"data-reveal><h2>Tada! Second Modal</h2><p>Some text..</p><aclass="close-reveal-modal">×</a></div>
5、如果这条经验帮助了你，请给本经验点个赞并投上宝贵的一票
