阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

    教程列表

    数据库
    抓包专区
    测试专区

    Foundation 模态框

    Foundation 模态框

    模态框是一个显示在页面头部的弹窗。

    我们可以在容器元素上(如 <div id="myModal")使用唯一 ID,并添加 .reveal-modal 类和 data-reveal 属性来添加模态框。我们可以在任何元素上使用 data-reveal-id=“id” 属性阿里打开模态框。 id 必须与容器 id 一致(实例为 “myModal”)。

    如果你希望在点击模态框之外的区域来关闭模态框。你可以在模态框的关闭按钮 <a> 标签上添加 .close-reveal-modal 类来实现。

    注意: 滑块需要使用 JavaScript。所以你需要初始化 Foundation 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;">
    
    卖前端学习教程

    只需几十元,就能买到培训班的内部教程!开启高薪之路!

    零基础小白阿里P7的教程都有!

    同时长期收购所有培训班的前端教程

    目录
    目录