Opening an overlay on page load using Zurb Foundation Reveal plugin

3
votes

There was another question on this subject here but it didn't seem as though there was a complete solution posted and the examples that had been linked to are no longer active so I'm posting this question as a result.

I'm looking to find a way to open a Zurb Foundation Reveal modal on page load (more specifically, I'd like to do it several seconds after page load). I don't write javascript, so I'm only somewhat literate on what i would need to have happen, so I'm hoping you smart JS folks out there can help me.

If I wanted to use reveal as it works out of the box, I would:

1) Include a link in the page with an ID of something like "openMyModal", like:

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

2) Include in the footer, the JS that would listen for the click event on that ID and open the corresponding modal, also given by an ID:

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

3) Include jQuery in my header or footer

4) Insert the modal content within a div with the ID mentioned above somewhere in the footer just before the tag.

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

That works great. But that only applies if I want to open the modal on a user-interaction basis (i.e. they click on the supplied link).

But what I was hoping for, was to open the modal automatically after say 5 seconds once the page load is complete. I expect that will mean, naturally, a DIV with a given ID for the modal as before, including jQuery in the footer - basically the same setup, except that the javascript itself calling this would not include listening for the click on the given link with a specific ID, but rather would simply wait for the DOM to load, wait a specified number of second (or milliseconds) and then fire automatically.

Can anyone tell me how this could be achieved?

3
javascriptmodal-dialogzurb-foundation

3 Answers

3
votes

Is it possible you're using Foundation 4? The syntax changed a bit to:

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

You can set it up exactly as you would normally, but just add a manual click trigger.

setTimeout accepts two arguments. A function, and the time to wait before running it (in milliseconds).

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

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

Or, if you don't want a link at all, just call the reveal method.

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

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

});
</script>
0
votes

I've used the following to fire Zurb's modal on page open with a time delay.

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

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