Question

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

我正在寻找一种方法在页面加载时打开Zurb Foundation Reveal模式（更具体地说，我想在页面加载后几秒钟完成它）。我不写javascript，所以我只是有点识字我需要发生什么，所以我希望你聪明的JS人可以帮助我。

如果我想使用揭秘，因为它开箱即用，我会：

1）在页面中包含一个ID为“openMyModal”的链接，如：

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

2）在页脚中包含JS，它将侦听该ID上的click事件并打开相应的模式，也由ID给出：

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

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

4）将模态内容插入div中，并在标签之前的页脚中的某处使用上面提到的ID。

<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>

Answer 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>

Answer 3

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

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

    /* Pop-up
    ================================================= */
    $(function() {
        function showpanel() {
        $('.reveal-modal').reveal({
            animation: 'fade',
            animationspeed: 800
        });
        }
        setTimeout(showpanel, 4000)
    }); 
});

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

3 个答案: