Voici un script permettant d'ouvrir une popup à l'ouverture d'une page html, de paramétrer la fermeture automatique, créer un cookie et ainsi pouvoir spécifier que cette popup s'ouvrira qu'une fois toutes les 24heures par exemple.

Jquery fancybox onload + delay avant fermeture + cookie

Voici un script permettant d’ouvrir une popup à l’ouverture d’une page html, de paramétrer la fermeture automatique, créer un cookie et ainsi pouvoir spécifier que cette popup s’ouvrira qu’une fois toutes les 24heures par exemple.

voir l’exemple source

Voir les commentaires dans le script :

<!-- chargement de jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- chargement du petit script de cookies, plus de détails à https://github.com/carhartl/jquery-cookie -->
<script type="text/javascript" src="jquery.cookie.js"></script> 
<!-- chargement de fancybox -->
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css" media="screen" />
<!-- appel de la fancybox -->
<script type="text/javascript">

    $(document).ready(function() {
        if($.cookie('the_cookie') != 1) { // Si the_cookie n'a pas pour valeur 1 alors on l'initialise et on joue l'appel de la popup
            $.cookie('the_cookie', '1', { expires: 1 }); // valeur en jour(s) avant expiration du cookie

            $.fancybox(
                 $("#popup").html(),
                 {
                    type : 'iframe',
                    href : 'mapage.html', // url vers notre page html qui sera chargée dans la popup en mode iframe
                    maxWidth : 800,
                    maxHeight : 600,
                    fitToView : false,
                    width : '70%',
                    height : '70%',
                    autoSize : false

            }
            );setTimeout("parent.$.fancybox.close()", 5000); // temps en milliseconde avant fermeture de la popup
        }
    });
</script>

Dans le body :

<a id="popup" style="display:none;"></a>
Click to rate this post!
[Total: 13 Average: 4.7]

A propos jeanluc

Check Also

jQuery loader

Nous allons voir comment réaliser un plug-in loader (chargement) de page avec JavaScript et notamment …

22 Commentaires

  1. Bonjour,

    j’ai bien lu votre article Jquery Fancybox Onload + Delay Avant Fermeture + Cookie cependant je n’arrive pas à le faire fonctionner.

    Serait-il possible de mettre un lien pour télécharger l’exemple que vous avez fait.
    Cordialement

  2. Les fichiers sources sont ajoutés.

  3. Bonjour,

    Super sa fonctionne correctement, merci pour le partage.

    Est-il possible d’ajouter un delay d’ouverture en plus du delay de fermeture , genre 2 ou 3 secondes apres le chargement de la page.

    Cdt

  4. Merci beaucoup pour tes scripts, très utile et très clair, je garde ton site en favoris précieusement !

  5. Parfait ! Merci 🙂

  6. Super résultat, merci beaucoup pour ce partage.

  7. Bonjour,
    encore merci pour ce script !

    Est il possible d’y ajouter 2 boutons en bas, comme pour valider un accès, un bouton « accéder » vers une url et un autre « annuler » vers une autre url ?
    Identique aux accès genre de plus de 18 ans, « vous avez plus de 18 ans, cliquez ici ».
    Merci.

  8. Merci beaucoup pour votre aide et votre réactivité.
    Tout fonctionne parfaitement !

    Arnaud

  9. works perfectly, thank you, but I would have the opportunity to make a refresch of the page when the fancybox closes; do you think is it possible?

  10. Parfait, merci beaucoup pour ce bout de code !

    Je cherche à rajouter au popup un délais avant son ouverture mais je n’y parviens pas 🙁

  11. Bonjour et merci pour ce bon script.

    Vous êtes un génie, le code marche sans aucun souci.
    Mais comment on doit procéder pour modifier le nombre de jour en 12 heures ?

    Merci d’avance pour votre retour.

    Cdt,

  12. Bonjour, et merci pour le partage sympa.
    Une question : comment faire disparaitre les barres de scrolling (qui restent même avec scrolling:no).
    Merci 😉

  13. Bonsoir,

    Tout d’abord super tuto.
    Tout fonctionne parfaitement ! Sauf la delay de fermeture
    Erreur dans la console?
    Uncaught TypeError: Cannot read property ‘close’ of undefined

    jQuery(document).ready(function($) {
    if($.cookie(‘the_cookie’) != 1) { // Si the_cookie n’a pas pour valeur 1 alors on l’initialise et on joue l’appel de la popup
    $.cookie(‘the_cookie’, ‘1’, { expires: 1 }); // valeur en jour(s) avant expiration du cookie

    $.fancybox(
    $(« #popup »).html(),
    {
    type : ‘iframe’,
    href : ‘/Major.jpg’, // url vers notre page html qui sera chargée dans la popup en mode iframe
    maxWidth : 800,
    maxHeight : 600,
    fitToView : false,
    width : ‘70%’,
    height : ‘70%’,
    autoSize : false

    }
    );setTimeout(« parent.$.fancybox.close() », 5000); // 5000 milliseconds = 5 seconds
    }
    });

    Merci

  14. salut,

    si je supprimer la ligne setTimeout(« parent.$.fancybox.close() », 5000); // 5000 milliseconds = 5 seconds

    plus d’erreur dans la console

    merci

  15. salut,
    j’ai du personnaliser,le code pour l’avoir en responsive
    maintenant il fonctionne très bien
    plus d’erreur
    Merci

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *