Bonjour à tous
Sur le site que je construis actuellement j'ai mis un script permettant l'ouverture d'une modal box à l'ouverture de ma page index. Seulement j'aimerai que cette modal s'ouvre toutes les 15min, mais là pour le coup je ne saurai quoi entrer dans le code jquery pour mettre en place cette fonction.

Un petit coup de main?

<script>
$(document).ready(function() {  

    //Put in the DIV id you want to display
    launchWindow('#dialog1');

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        //Set the popup window to center
        box.css('top', winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});
function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top', winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

}
</script>

Je vous remercie d'avance. J'imagine que la fonction à ajouter ne doit pas être bien compliquée mais ne m'y connaissant pas en jquery je bloque.

7 réponses


NotANumber
Réponse acceptée

Salut,

pas besoin de jQuery, juste un petit setInterval :

setInterval(function()
{
    launchWindow('#dialog1');
}, 900000);
dany1109
Auteur
Réponse acceptée

Merci pour ta réponse mais j'ai certainement du mal intégrer le setinterval car cela ne fonctionne pas.

Peux tu m'indiquer où et comment l'ajouter à mon code posté plus haut?

En te remerciant

NotANumber
Réponse acceptée

Dans ta fonction "ready" comme ceci :

$(document).ready(function() {  

    setInterval(function()
    {
        launchWindow('#dialog1');
    }, 900000); 
});

As-tu bien attendu 15 minutes pour voir si la fonction s'exécutait bien dans le setInterval ?
Sinon tu peux baisser la valeur 900000 pour que sa soit plus rapide. ( en 3000 pour 3 secondes )
Ou sinon, tu peux aller sur ce site pour tout savoir sur la méthode setInterval.

dany1109
Auteur
Réponse acceptée

je viens de tenter ça

<script>
$(document).ready(function() {  
    setInterval(function()
    {
        launchWindow('#dialog1');
    }, 900000); 

    //Put in the DIV id you want to display
    launchWindow('#dialog1');

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
        //Set the popup window to center
        box.css('top', winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});
function launchWindow(id) {

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        $(id).css('top', winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000); 

}
</script>

Mais le modal réapparait aussitôt que j'actualise la page...

NotANumber
Réponse acceptée

oui car juste en dessous du setInterval tu fait appel à ta méthode :

//Put in the DIV id you want to display
launchWindow('#dialog1');

Tu dois l'enlever

$(document).ready(function() {  

    setInterval(function()
    {
        //Put in the DIV id you want to display
        launchWindow('#dialog1');
    }, 900000); 

    //if close button is clicked
    $('.window #close').click(function () {
        $('#mask').hide();
        $('.window').hide();
    });     

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });         

    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top', winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    }); 

});
dany1109
Auteur
Réponse acceptée

C'est super ça marche niquel !!!

Merci mille fois !!!!

De rien ;)