3

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

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

如果我想使用开箱即用的显示，我会：

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 秒后自动打开模式。我希望这自然意味着一个 DIV 具有给定的模式 ID，包括页脚中的 jQuery - 基本上相同的设置，除了调用它的 javascript 本身不包括监听给定链接的点击一个特定的 ID，而是简单地等待 DOM 加载，等待指定的秒数（或毫秒），然后自动触发。

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

4

3 回答 3

3

你有可能使用Foundation 4吗？语法稍微更改为：

<script type="text/javascript">
  $(document).ready(function() {
    setTimeout(function(){
      $("#myModal").foundation('reveal', 'open');
    }, 5000);
  });
</script>
于 2013-04-10T17:44:19.947 回答
2

您可以像往常一样进行设置，但只需添加一个手动点击触发器。

setTimeout接受两个参数。一个函数，以及运行它之前的等待时间（以毫秒为单位）。

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

    setTimeout(function(){
      $("#openMyModal").click();
    }, 5000);
});
</script>

或者，如果您根本不想要链接，只需调用reveal 方法。

<script type="text/javascript">
$(document).ready(function() {

    setTimeout(function(){
      $("#myModal").reveal();
    }, 5000);

});
</script>
于 2013-04-08T13:10:48.647 回答
0

我已经使用以下内容在页面打开时触发 Zurb 的模态，但有时间延迟。

jQuery(document).ready(function($) {

    /* Pop-up
    ================================================= */
    $(function() {
        function showpanel() {
        $('.reveal-modal').reveal({
            animation: 'fade',
            animationspeed: 800
        });
        }
        setTimeout(showpanel, 4000)
    }); 
});
于 2013-11-25T12:55:11.370 回答