javascript - 使用 Zurb Foundation Reveal 插件在页面加载时打开叠加层

Question

这里还有一个关于这个主题的问题，但似乎没有发布完整的解决方案，而且链接到的示例不再有效，因此我发布了这个问题。

我正在寻找一种在页面加载时打开 Zurb Foundation Reveal 模式的方法(更具体地说，我想在页面加载后几秒钟打开它)。我不写 javascript，所以我只知道我需要发生的事情，所以我希望你们这些聪明的 JS 人可以帮助我。

如果我想开箱即用地使用 reveal，我会:

1) 在页面中包含一个链接，其 ID 类似于“openMyModal”，例如:

<a href="#" id="openMyModal">This is my modal-opening link</a>

2) 在页脚中包含将监听该 ID 上的点击事件并打开相应模式的 JS，也由 ID 给出:

<script type="text/javascript">
    $(document).ready(function() {
        $("#openMyModal").click(function() {
            $("#myModal").reveal();
        });
    });
</script>

3) 在我的页眉或页脚中包含 jQuery

4) 将模态内容插入带有上述 ID 的 div 中，位于标记之前的页脚中。

<div id="myModal">
    This is my modal window.
</div>

效果很好。但这仅适用于我想在用户交互的基础上打开模式(即他们单击提供的链接)。

但我所希望的是，在页面加载完成后 5 秒后自动打开模式。我希望这自然意味着像以前一样具有给定模态 ID 的 DIV，包括页脚中的 jQuery - 基本上相同的设置，除了调用它的 javascript 本身不包括监听给定链接上的点击一个特定的 ID，而是简单地等待 DOM 加载，等待指定的秒数(或毫秒)，然后自动触发。

谁能告诉我这是如何实现的？

Answer 1

您可能正在使用 Foundation 4 吗？语法稍微更改为:

<script type="text/javascript">
  $(document).ready(function() {
    setTimeout(function(){
      $("#myModal").foundation('reveal', 'open');
    }, 5000);
  });
</script>