Timed appearance Modal Reveal

Question

I'm trying to use the reveal modal of Foundation.

I already succeed with just the use of a basic modal. As I'm just starting on the project (which use symfony2 and foundation), I have some difficulties.I dont really understand how foundation work.

So what i need to do :

Make the reveal modal open after a few second (10 for now) with a fade in-out animation without the grey background around it. By the way, the fade in-out function happens only after the first appearance of the modal, I dont understand why so ?

I tried to search how to do this but no topic about this were found( maybe i'm just bad at searching).

Thanks for any answer ! :D

PS: sorry for the grammar fault, not my native language.

For any precision just ask ! Here is a copy of the modal i'm using :

<p><a href="#" data-reveal-id="myModal">Click Me For A Modal</a></p>
<div id="myModal"  data-overlay="false" class="reveal-modal"
    data-animate="fade-in fade-out" data-reveal aria-labelledby="modalTitle"
    aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Awesome. I have it.</h2>
    <p class="lead">Your couch.  It is mine.</p>
    <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

Answer 1

first, fire the modal on page load using Foundation callback (hat tip to this Foundation forum post and codepen code):

    $(document).ready(function(){
setTimeout(
  function() 
  {
    //do something special
$('#myModal').foundation('reveal', 'open')
  }, 10000);
});

Then you need to display: none the reveal background overlay like so:

.reveal-modal-bg { display: none; }