javascript - Opening an overlay on page load using Zurb Foundation Reveal plugin - Stack Overflow

admin管理员组

文章数量:1328409

There was another question on this subject here but it didn't seem as though there was a plete 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 plete. 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?

There was another question on this subject here but it didn't seem as though there was a plete 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 plete. 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?

• javascript
• modal-dialog
• zurb-foundation

Share Improve this question Follow asked Apr 8, 2013 at 12:59 Jean St-AmandJean St-Amand 79355 silver badges1212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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>

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>

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)
    }); 
});

本文标签： javascriptOpening an overlay on page load using Zurb Foundation Reveal pluginStack Overflow