【2017年整理】Foundation 模态框.pdfVIP

Foundation 模态框 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 times;/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 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 尝试⼀下 » 第⼆个模态框会取代第⼀个模态框。如果你希望在打开第⼆个模态框时，不关闭第⼀ 个模态框。可以在第⼆个模态框上添加 data- options=multiple_opened:true; 属性： 实例 div id=secondModal class=reveal-modal data-reveal data- options=multiple_opened:true; 尝试⼀下 » W3Cschool （ ）最⼤的技术知识分享与学习平台 此篇内容来⾃ ⽹站⽤户上传并发布。