Menu icon Foundation
Reveal modal activated by time

Hello everyone i'm trying to use the reveal modal of Foundation.

I already succeed in its implementation in my code with docs.

However i want it to open up after something like ten seconds.

I'm using Foundation with a symfony 2 project.

As i'm starting on the project (which as symfony2 and foundation),

i have some real 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. 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 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 !

symfony2revealmodals

Hello everyone i'm trying to use the reveal modal of Foundation.

I already succeed in its implementation in my code with docs.

However i want it to open up after something like ten seconds.

I'm using Foundation with a symfony 2 project.

As i'm starting on the project (which as symfony2 and foundation),

i have some real 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. 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 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 !

Rafi Benkual over 2 years ago

You can programmatically open the modal and add a setTimeout

open a reveal modal

$('#reveal').foundation('open');

Wilou over 2 years ago

Hi i tried to use this but the modal doesn't want to open, i tried with a window load and document redy ready but nether seems to work. But when i put alert in them they show up.

I dont understand what did i do bad.

<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>
<script>
            $(window).load(function() {
                alert("window load occurred!");
            });
            $(document).ready(function() {
                alert("Le document est pret")
                var $modal = $('#myModal');//define your variables
                //var delay = 2000;

                modalHandler();//call your function

                function modalHandler(){
                    $('#myModal').foundation('open');

                }

            });
</script>

 

This code is supposed to function no ? or do I need to download a part of foundation to make it work.
PS : I'm under ubuntu so i can dowload package

Wilou over 2 years ago

Finaly i found out why it wasn't functionning i forgot to put :

function modalHandler(delay){
   setTimeout(function () {
    $('#myModal').foundation('reveal','open');
     },delay);
}

added a reveal to foundation('open') and it functionned

However i'm looking for a way to have the modal following the scrolling and for it to stay at he middle of the screen.

The background is grey and i would like to take this of. Just to get the modal.