0

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>
Alvin Bunk
  • 7,621
  • 3
  • 29
  • 45
AHAV
  • 31
  • 1
  • 8

1 Answers1

0

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; }
Nathaniel Flick
  • 2,902
  • 2
  • 22
  • 31
  • Thank you for the link and your answer, however do u have any idea about the delay (10s) that I would like to put in place. – AHAV Apr 04 '17 at 15:22
  • I added a setTimeout function so after page load there will be a 10 second delay and then the modal will fire. – Nathaniel Flick Apr 04 '17 at 17:16
  • Depending on the sequence of your CSS and JS loading, the document.ready is probably not even needed. – Kris Krause Apr 05 '17 at 17:49
  • I would still use it because you never know how slow the user's connection might be. – Nathaniel Flick Apr 05 '17 at 20:08
  • I use scss (cause the dev before me used it) so i dont know if it mean something ? I tried the function but the : $('#myModal').foundation('reveal', 'open') }, 10000); doesnt function i tried to put an alert to see if pass by the section. But the reveal do nothing :S – AHAV Apr 06 '17 at 13:29
  • Nevermind i forgot the reveal and now it is working well just need to apply the delay and its good to go ! – AHAV Apr 06 '17 at 14:21
  • Yes firing the callback for Foundation features like Reveal helps them work. ;) – Nathaniel Flick Apr 07 '17 at 04:39