Comment n afficher qu une seule fois une pop up
Fermé
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
-
8 mai 2021 à 15:19
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 9 mai 2021 à 22:39
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 9 mai 2021 à 22:39
A voir également:
- Comment n afficher qu une seule fois une pop up
- Comment imprimer un tableau excel sur une seule page - Guide
- Serveur pop - Guide
- Sketch up - Télécharger - 3D
- Sirène pompiers 5 fois signification ✓ - Forum Loisirs / Divertissements
- Pop up mobile external mode d'emploi - Forum Lecteurs et supports vidéo
13 réponses
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
8 mai 2021 à 17:49
8 mai 2021 à 17:49
Bonjour
Tu dois mémoriser dans le localstorage du navigateur, ou un cookie ou en bdd, ou en sesssion... Que l'utilisation a déjà vu la popup ...
Tu dois mémoriser dans le localstorage du navigateur, ou un cookie ou en bdd, ou en sesssion... Que l'utilisation a déjà vu la popup ...
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
9 mai 2021 à 10:20
9 mai 2021 à 10:20
Bonjour,
Concernant les sessions, il faut simplement vérifier que la session n'est pas déjà ouverte et dans la négative, afficher le code de ton formulaire ou de ce que tu veux.
Concernant les sessions, il faut simplement vérifier que la session n'est pas déjà ouverte et dans la négative, afficher le code de ton formulaire ou de ce que tu veux.
<?php session_start(); ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Hello, world!</title> </head> <body> <h4>Titre de la page toujours visible</h4> <hr> <?php if(!isset($_SESSION['story'])) { $_SESSION['story'] = 'story'; ?> <p>Texte en HTML du formulaire d'inscription visible si la session n'est pas ouverte</p> <?php } ?> <p>Texte en HTML de la page toujours visible</p> </body> </html>
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
8 mai 2021 à 18:37
8 mai 2021 à 18:37
bonjour Jordane
merci pour la reponse
mais quelle est la solution la plus facile et surtout celle ou je pourrais trouver un exemple
merci
merci pour la reponse
mais quelle est la solution la plus facile et surtout celle ou je pourrais trouver un exemple
merci
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
8 mai 2021 à 18:43
8 mai 2021 à 18:43
Elles sont toutes aussi faciles les unes que les autres.
Le tout est de savoir si tu souhaites que la modal se réouvre à la prochaine réouverture du site par l'utilisateur si tu veux qu'elle ne soit masquée que pour la durée durant laquelle il navigue sur ton site ...
Ou si tu veux la masquer pendant X jours ...
Ou si tu veux qu'elle ne soit masquée que pour les utilisateurs logués et quelque soit le navigateur qu'il utilise ( une fois son PC, une fois depuis son smartphone ... )
Bref... Déjà.. il faut définir précisément la contrainte désirée.
Une fois cette reflexion faite, tu pourras.. soit choisir la BDD ( pour le multi poste... ) ou les sessions en PHP tant que l'utilisateur reste sur le site .. ou en Localstorage ou cookie pour une durée plus longue (valable que depuis un seul ordi )
Le tout est de savoir si tu souhaites que la modal se réouvre à la prochaine réouverture du site par l'utilisateur si tu veux qu'elle ne soit masquée que pour la durée durant laquelle il navigue sur ton site ...
Ou si tu veux la masquer pendant X jours ...
Ou si tu veux qu'elle ne soit masquée que pour les utilisateurs logués et quelque soit le navigateur qu'il utilise ( une fois son PC, une fois depuis son smartphone ... )
Bref... Déjà.. il faut définir précisément la contrainte désirée.
Une fois cette reflexion faite, tu pourras.. soit choisir la BDD ( pour le multi poste... ) ou les sessions en PHP tant que l'utilisateur reste sur le site .. ou en Localstorage ou cookie pour une durée plus longue (valable que depuis un seul ordi )
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
8 mai 2021 à 19:09
8 mai 2021 à 19:09
merci jordane pour cette explication
je pense que dans mon cas
les sessions en PHP tant que l'utilisateur reste sur le site seraient la meilleur solution
car je compte profiter de cette pop up pour faire l inscription a une newsletter et donner quelques infos supplémentaires
reste a trouver un exemple a présent
je pense que dans mon cas
les sessions en PHP tant que l'utilisateur reste sur le site seraient la meilleur solution
car je compte profiter de cette pop up pour faire l inscription a une newsletter et donner quelques infos supplémentaires
reste a trouver un exemple a présent
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
8 mai 2021 à 19:33
8 mai 2021 à 19:33
que penses tu de cet exemple jordane ou quelqu un d autre
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Bootstrap Modal with SessionStorage</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'> <script> body { background-color: #335C64; margin: 10px; } body h4 { color: #FFD5C2; } body .desc { color: #FFD5C2; margin-bottom: 4px; } body .btn-sm { margin-bottom: 15px; } </script> </head> <body> <!-- partial:index.partial.html --> <!-- // HTML // 22 feb 2017 // Only Bootstrap Modal (#myModal) is used in the javascript. Everything else is optional. See the JS. --> <h4>Bootstrap Modal with SessionStorage</h4> <hr /> <p class="desc"> Click this button to <strong>Refresh</strong> the page. </p> <a href="" id="refresh-page" class="btn btn-info btn-sm"> Refresh Page </a> <p class="desc"> Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page. </p> <a href="" id="reset-session" class="btn btn-warning btn-sm"> Reset Session </a> <!-- Bootstrap Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content --> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title text-primary">Victor Frankenstein</h4> </div> <!-- Modal body --> <div class="modal-body"> <p> ceci est un test </p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button> </div> </div> <!-- // .modal-content --> </div> <!-- // .modal-dialog --> </div> <!-- // #myModal --> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script> <script> // Original code by Simon. You can check the original code here https://codepen.io/html5andblog/pen/qEqdqO?editors=1010 // Altered and Edited for Bootstrap Modal // 22 feb 2017 // init jQuery(document).ready(function(){ // Start // sessionStorage.getItem('key'); if (sessionStorage.getItem("story") !== 'true') { // sessionStorage.setItem('key', 'value'); pair sessionStorage.setItem("story", "true"); // Calling the bootstrap modal $("#myModal").modal(); } // End // Do not include the code below, it is just for the 'Reset Session' button in the viewport. // This is same as closing the browser tab. $('#reset-session').on('click',function(){ sessionStorage.setItem('story',''); }); }); </script> </body> </html>
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
Modifié le 8 mai 2021 à 20:34
Modifié le 8 mai 2021 à 20:34
ah mince je viens d essayer mais cela ne fonctionne pas bien
je m explique
lorsque j ouvre ma page pour la première fois
le pop up est bien la
je rentre une adresse mail pour la newsletter et lorsque je valide l adresse mail je suis redirige vers une autre page de mon site pour confirmer l inscription a la newsletter (c est normal )
Mais lorsque je reviens sur la page ou il y a le pop up ce dernier est de nouveau la si je rafraichis
comment faire dés lors pour que quand l utilisateur a rentre son adresse mail et qu il est redirige , le pop up reçois l instruction de se fermer
afin qu il ne puisse plus apparaître durant la session
je viens de remarquer aussi que si je relance la page avec le pop up dans un nouvel onglet le pop up est de nouveau la
je m explique
lorsque j ouvre ma page pour la première fois
le pop up est bien la
je rentre une adresse mail pour la newsletter et lorsque je valide l adresse mail je suis redirige vers une autre page de mon site pour confirmer l inscription a la newsletter (c est normal )
Mais lorsque je reviens sur la page ou il y a le pop up ce dernier est de nouveau la si je rafraichis
comment faire dés lors pour que quand l utilisateur a rentre son adresse mail et qu il est redirige , le pop up reçois l instruction de se fermer
afin qu il ne puisse plus apparaître durant la session
je viens de remarquer aussi que si je relance la page avec le pop up dans un nouvel onglet le pop up est de nouveau la
<?php session_start(); ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script> body { background-color: #335C64; margin: 10px; } body h4 { color: #FFD5C2; } body .desc { color: #FFD5C2; margin-bottom: 4px; } body .btn-sm { margin-bottom: 15px; } </script> <title>Hello, world!</title> </head> <body> <!-- partial:index.partial.html --> <!-- // HTML // 22 feb 2017 // Only Bootstrap Modal (#myModal) is used in the javascript. Everything else is optional. See the JS. --> <h4>Bootstrap Modal with SessionStorage</h4> <hr /> <p class="desc"> Click this button to <strong>Refresh</strong> the page. </p> <a href="" id="refresh-page" class="btn btn-info btn-sm"> Refresh Page </a> <p class="desc"> Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page. </p> <a href="" id="reset-session" class="btn btn-warning btn-sm"> Reset Session </a> <!-- Bootstrap Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content --> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title text-primary">Victor Frankenstein</h4> </div> <!-- Modal body --> <div class="modal-body"> <div class="card-deck"style="height:100%;"> <!-- debut cinquieme cadre--> <div class="card-defaut text-center"style="height:100%; "> <div class="card-block"> <div class="card h-100"> <h6 class="card-title">Inscription newsletter </h6> <div class="login-form"> <?php if(isset($_GET['reg_err'])) { $err = htmlspecialchars($_GET['reg_err']); switch($err) { case 'success': ?> <div class="alert alert-success"> <strong>Succès</strong> inscription réussie ! <strong><a href="accueil-peche-perle.php"target="_blank" >A present connectes toi ici</a></strong> </div> <?php break; case 'email': ?> <div class="alert alert-danger"> <strong>Erreur</strong> email non valide </div> <?php break; case 'email_length': ?> <div class="alert alert-danger"> <strong>Erreur</strong> email trop long </div> <?php break; case 'pseudo_length': ?> <div class="alert alert-danger"> <strong>Erreur</strong> compte deja existant </div> <?php } } ?> <form action="traitement-neuw.php" method="post"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title"> <input type="email" name="email" class="form-control" placeholder="Email" required="required" autocomplete="off"></h5> <h5 class="card-title"> <button type="submit" class="btn btn-primary btn-block">Inscription</button></h5> </div> </div> </form> <div class="card-block"> <p class="card-text">Abonne-toi pour ne rater aucun nouvel évènement </p> </div> </div> </div> </div> </div> <!-- fin cinquieme cadre--> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button> </div> </div> <!-- // .modal-content --> </div> <!-- // .modal-dialog --> </div> <!-- // #myModal --> <!-- partial --> <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> <script> // Original code by Simon. You can check the original code here https://codepen.io/html5andblog/pen/qEqdqO?editors=1010 // Altered and Edited for Bootstrap Modal // 22 feb 2017 // init jQuery(document).ready(function(){ // Start // sessionStorage.getItem('key'); if (sessionStorage.getItem("story") !== 'true') { // sessionStorage.setItem('key', 'value'); pair sessionStorage.setItem("story", "true"); // Calling the bootstrap modal $("#myModal").modal(); } // End // Do not include the code below, it is just for the 'Reset Session' button in the viewport. // This is same as closing the browser tab. $('#reset-session').on('click',function(){ sessionStorage.setItem('story',''); }); }); </script> </body> </html>
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
9 mai 2021 à 01:15
9 mai 2021 à 01:15
Bonjour,
Déjà, pour commencer... ne penses tu pas que tes lignes
164
165
ne sont pas un doublon des lignes
169
171
??
Ensuite, concernant le code js, peux tu y ajouter quelques console.log histoire de voir ce que valent les différentes variables ?
par exemple, avant le IF
Tu regarderas ensuite dans la console de ton navigateur ce que ça t'affiche.. à la première ouverture..... puis quand tu reviens sur la page.
Et puis.. as tu lu la documentation pour le sessionstorage ????
Je suppose que non..
Donc en voici un extrait des plus important :
C'est pour ça que je t'avais parlé des session en PHP...
Mais bon, il serait plus simple, pour toi, d'utiliser des cookie en javascript ou le localstorage.
Déjà, pour commencer... ne penses tu pas que tes lignes
164
165
ne sont pas un doublon des lignes
169
171
??
Ensuite, concernant le code js, peux tu y ajouter quelques console.log histoire de voir ce que valent les différentes variables ?
par exemple, avant le IF
console.log(" La variable STORY = " , sessionStorage.getItem("story") );
Tu regarderas ensuite dans la console de ton navigateur ce que ça t'affiche.. à la première ouverture..... puis quand tu reviens sur la page.
Et puis.. as tu lu la documentation pour le sessionstorage ????
Je suppose que non..
Donc en voici un extrait des plus important :
une session de navigation n'est valable que pour le contexte de navigation actuel, c'est-à-dire que le fait d'ouvrir une page dans un nouvel onglet ou dans une nouvelle fenêtre provoquera l'initialisation d'une nouvelle session de navigation
C'est pour ça que je t'avais parlé des session en PHP...
Mais bon, il serait plus simple, pour toi, d'utiliser des cookie en javascript ou le localstorage.
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
>
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
9 mai 2021 à 11:56
9 mai 2021 à 11:56
merci jordane pour les explications et la correction des lignes que j avais en double
je vais effectuer le test car cela est toujours intéressant d apprendre des choses
en fait je t avoué que non je n ai pas regarder cette documentation
mais a présent que tu me fais un résumé , je m aperçois donc que je n étais pas sur le bon chemin ...
je vois que j ai une proposition plus bas que je vais tester
je reviens pour la suite
je vais effectuer le test car cela est toujours intéressant d apprendre des choses
en fait je t avoué que non je n ai pas regarder cette documentation
mais a présent que tu me fais un résumé , je m aperçois donc que je n étais pas sur le bon chemin ...
je vois que j ai une proposition plus bas que je vais tester
je reviens pour la suite
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 12:19
9 mai 2021 à 12:19
bonjour dugenou
merci pour ta réponse c est super sympa et surtout pour ta solution
cela fonctionne avec une page isolée
et en effet une fois que l utilisateur a rentre son adresse mail et qu il reviens sur sa page plus de pop up
et en effet lorsque je supprime les données du navigateurs et que je relance la page le pop up est de nouveau la
donc cela est nickel
mais qu arrivera t il lorsque l utilisateur va se déconnecter et se reconnecter
il devrait ne plus voir la pop up sauf si il efface ses données de son navigateur
mais dans le même temps une session est détruite lorsque l utilisateur quitte mon site ...ou alors je me trompe et donc de ce fait c est comme si il avait effacer ses données du navigateur
merci pour ta réponse c est super sympa et surtout pour ta solution
cela fonctionne avec une page isolée
et en effet une fois que l utilisateur a rentre son adresse mail et qu il reviens sur sa page plus de pop up
et en effet lorsque je supprime les données du navigateurs et que je relance la page le pop up est de nouveau la
donc cela est nickel
mais qu arrivera t il lorsque l utilisateur va se déconnecter et se reconnecter
il devrait ne plus voir la pop up sauf si il efface ses données de son navigateur
mais dans le même temps une session est détruite lorsque l utilisateur quitte mon site ...ou alors je me trompe et donc de ce fait c est comme si il avait effacer ses données du navigateur
dugenou
Messages postés
6087
Date d'inscription
mercredi 19 janvier 2005
Statut
Contributeur
Dernière intervention
30 juillet 2021
1 451
9 mai 2021 à 12:29
9 mai 2021 à 12:29
Si le visiteur se déconnecte, par exemple en fermant son navigateur et qu'il revient sur cette page, la session sera fermée et la popup sera à nouveau visible. Ce serait la même chose avec des cookies, si son navigateur les supprime à la fermeture.
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 12:20
9 mai 2021 à 12:20
ah mince le message de dugenou est effacer
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 19:08
9 mai 2021 à 19:08
ah ok
je comprends mieux
dans mon cas le pop up sera mis sur la page d accueil et j aurais souhaiter que quand l utilisateur se déconnecte puis se reconnecte que le pop up puisse être de nouveau la
sans pour cela que l utilisateur puisse avoir ferme son navigateur
Mais apparemment cela n est pas possible
merci de l aide
je comprends mieux
dans mon cas le pop up sera mis sur la page d accueil et j aurais souhaiter que quand l utilisateur se déconnecte puis se reconnecte que le pop up puisse être de nouveau la
sans pour cela que l utilisateur puisse avoir ferme son navigateur
Mais apparemment cela n est pas possible
merci de l aide
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
9 mai 2021 à 19:45
9 mai 2021 à 19:45
Bonjour
Si.
Il suffit de supprimer la variable de session lorsqu'il se déconnecte.
Si.
Il suffit de supprimer la variable de session lorsqu'il se déconnecte.
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 19:53
9 mai 2021 à 19:53
bonjour jordane
ah ok
donc le fichier de deconnexion ressemblerais a ceci
ah ok
donc le fichier de deconnexion ressemblerais a ceci
<?php session_start(); session_destroy(); header('Location:index.php'); die();
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 20:27
9 mai 2021 à 20:27
je viens de faire un essai , mais pas très concluant
j ai donc mis le fichier avec le pop up (c est un fichier d essai)dans le dossier de mon site
dans le dossier de mon site j ai un fichier de deconnexion qui détruit la session bien évidement ...
lorsque je lance pour la première fois le fichier avec le pop up , le pop up s active bien
lorsque je continue a surfer et que je reviens sur sur la page du pop up , le pop up n apparaît plus , donc nickel
je me déconnecte de mon site en utilisant le fichier de deconnexion
je relance le fichier avec le pop up , mais le pop up n apparaît plus
pour qu il puisse de nouveau apparaître je dois effacer les donner du navigateur
voici le code du fichier avec le pop up
j ai donc mis le fichier avec le pop up (c est un fichier d essai)dans le dossier de mon site
dans le dossier de mon site j ai un fichier de deconnexion qui détruit la session bien évidement ...
lorsque je lance pour la première fois le fichier avec le pop up , le pop up s active bien
lorsque je continue a surfer et que je reviens sur sur la page du pop up , le pop up n apparaît plus , donc nickel
je me déconnecte de mon site en utilisant le fichier de deconnexion
je relance le fichier avec le pop up , mais le pop up n apparaît plus
pour qu il puisse de nouveau apparaître je dois effacer les donner du navigateur
voici le code du fichier avec le pop up
<?php session_start(); ?> <!doctype html><html lang="en"><head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script> body { background-color: #335C64; margin: 10px; } body h4 { color: #FFD5C2; } body .desc { color: #FFD5C2; margin-bottom: 4px; } body .btn-sm { margin-bottom: 15px; } </script> <title>Hello, world!</title> </head> <body> <h4>Bootstrap Modal with SessionStorage</h4> <hr /> <p class="desc"> Click this button to <strong>Refresh</strong> the page. </p> <a href="" id="refresh-page" class="btn btn-info btn-sm"> Refresh Page </a> <p class="desc"> Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page. </p> <a href="" id="reset-session" class="btn btn-warning btn-sm"> Reset Session </a> <?php if(!isset($_SESSION['story'])) { $_SESSION['story'] = 'story'; ?> <!-- Bootstrap Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content --> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title text-primary">Victor Frankenstein</h4> </div> <!-- Modal body --> <div class="modal-body"> <div class="card-deck"style="height:100%;"> <!-- debut cinquieme cadre--> <div class="card-defaut text-center"style="height:100%; "> <div class="card-block"> <div class="card h-100"> <h6 class="card-title">Inscription newsletter </h6> <div class="login-form"> <?php if(isset($_GET['reg_err'])) { $err = htmlspecialchars($_GET['reg_err']); switch($err) { case 'success': ?> <div class="alert alert-success"> <strong>Succès</strong> inscription réussie ! <strong> <a href="accueil-peche-perle.php"target="_blank" >A present connectes toi ici</a> </strong> </div> <?php break; case 'email': ?> <div class="alert alert-danger"> <strong>Erreur</strong> email non valide </div> <?php break; case 'email_length': ?> <div class="alert alert-danger"> <strong>Erreur</strong> email trop long </div> <?php break; case 'pseudo_length': ?> <div class="alert alert-danger"> <strong>Erreur</strong> compte deja existant </div> <?php } } ?> <form action="traitement-neuw.php" method="post"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title"> <input type="email" name="email" class="form-control" placeholder="Email" required="required" autocomplete="off"> </h5> <h5 class="card-title"> <button type="submit" class="btn btn-primary btn-block">Inscription</button> </h5> </div> </div> </form> <div class="card-block"> <p class="card-text">Abonne-toi pour ne rater aucun nouvel évènement </p> </div> </div> </div> </div> </div> <!-- fin cinquieme cadre--> </div> <?php } ?> <p>Texte en HTML de la page toujours visible ici sera mon site </p> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button> </div> </div> <!-- // .modal-content --> </div> <!-- // .modal-dialog --> </div> <!-- // #myModal --> <!-- partial --> <!-- Option 2: Separate Popper and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> <script> // Original code by Simon. You can check the original code here https://codepen.io/html5andblog/pen/qEqdqO?editors=1010 // Altered and Edited for Bootstrap Modal // 22 feb 2017 // init jQuery(document).ready(function(){ // Start // sessionStorage.getItem('key'); if (sessionStorage.getItem("story") !== 'true') { // sessionStorage.setItem('key', 'value'); pair sessionStorage.setItem("story", "true"); // Calling the bootstrap modal $("#myModal").modal(); } // End // Do not include the code below, it is just for the 'Reset Session' button in the viewport. // This is same as closing the browser tab. $('#reset-session').on('click',function(){ sessionStorage.setItem('story',''); }); }); </script> </body> </html>
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
Modifié le 9 mai 2021 à 21:35
Modifié le 9 mai 2021 à 21:35
Bon,
Niveau code, tu as laissé du JS en trop. (devenu inutile avec l'utilisation des sessions php.. )
Ensuite, histoire de simplfier ton code, je t'invite à :
Mettre le code de la modal dans un fichier php à part :
myModal.php
Et dans ta page principale ( celle où tu veux afficher la modal )
et ton fichier de logout
Niveau code, tu as laissé du JS en trop. (devenu inutile avec l'utilisation des sessions php.. )
Ensuite, histoire de simplfier ton code, je t'invite à :
Mettre le code de la modal dans un fichier php à part :
myModal.php
<!-- Bootstrap Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content --> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title text-primary">Victor Frankenstein</h4> </div> <!-- Modal body --> <div class="modal-body"> <div class="card-deck"style="height:100%;"> <!-- debut cinquieme cadre--> <div class="card-defaut text-center"style="height:100%; "> <div class="card-block"> <div class="card h-100"> <h6 class="card-title">Inscription newsletter </h6> <div class="login-form"> <?php if(isset($_GET['reg_err'])) { $err = htmlspecialchars($_GET['reg_err']); switch($err) { case 'success': ?> <div class="alert alert-success"> <strong>Succès</strong> inscription réussie ! <strong> <a href="accueil-peche-perle.php"target="_blank" >A present connectes toi ici</a> </strong> </div> <?php break; case 'email': ?> <div class="alert alert-danger"> <strong>Erreur</strong> email non valide </div> <?php break; case 'email_length': ?> <div class="alert alert-danger"> <strong>Erreur</strong> email trop long </div> <?php break; case 'pseudo_length': ?> <div class="alert alert-danger"> <strong>Erreur</strong> compte deja existant </div> <?php } } ?> <form action="traitement-neuw.php" method="post"> <div class="card text-center"> <div class="card-body"> <h5 class="card-title"> <input type="email" name="email" class="form-control" placeholder="Email" required="required" autocomplete="off"> </h5> <h5 class="card-title"> <button type="submit" class="btn btn-primary btn-block">Inscription</button> </h5> </div> </div> </form> <div class="card-block"> <p class="card-text"> Abonne-toi pour ne rater aucun nouvel évènement </p> </div> </div> </div> </div> </div> <!-- fin cinquieme cadre--> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> Close </button> </div> </div> <!-- // .modal-content --> </div> <!-- // .modal-dialog --> </div> <!-- // #myModal --> <script> // ouverture de la modal jQuery(document).ready(function(){ $("#myModal").modal(); }); </script> </div> <script> // ouverture de la modal jQuery(document).ready(function(){ $("#myModal").modal(); }); </script>
Et dans ta page principale ( celle où tu veux afficher la modal )
<?php session_start(); ?> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> <script> body { background-color: #335C64; margin: 10px; } body h4 { color: #FFD5C2; } body .desc { color: #FFD5C2; margin-bottom: 4px; } body .btn-sm { margin-bottom: 15px; } </script> <title>Hello, world!</title> </head> <body> <!-- DEBUT DU CONTENU DE TON SITE --> <h4>Bootstrap Modal with SessionStorage</h4> <hr /> <p class="desc"> Click this button to <strong>Refresh</strong> the page. </p> <a href="" id="refresh-page" class="btn btn-info btn-sm"> Refresh Page </a> <p class="desc"> Click this button to <strong>Reset</strong> and <strong>Refresh</strong> the page. </p> ?> <!-- FIN DU CONTENU DE TON SITE --> <!-- -------------------------------------------------------- --> <!-- Include des JS Jquery, Popper and Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script> <!-- INCLUDE DE LA MODAL --> <?php if(empty($_SESSION['story'])) { $_SESSION['story'] = TRUE; require_once "myModal.php"; } ?> </body> </html>
et ton fichier de logout
<?php session_start(); $_SESSION['story'] = NULL; unset($_SESSION['story']); session_destroy(); header('Location:index.php'); exit;
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 21:30
9 mai 2021 à 21:30
un tout très grand merci pour ces codes jordane
pour lesquelles j essayerais de comprendre comment tu les as réalisé
par contre cela ne fonctionne pas
je lance donc le fichier principal contenant le popup
le popup s affiche bien , je le ferme et je relance la page de nouveau
le pop up est la ...
alors qu il ne devrait plus y être
la seule et unique façon pour qu il puisse de nouveau apparaître c est que je me déconnecte et me reconnecte
pour lesquelles j essayerais de comprendre comment tu les as réalisé
par contre cela ne fonctionne pas
je lance donc le fichier principal contenant le popup
le popup s affiche bien , je le ferme et je relance la page de nouveau
le pop up est la ...
alors qu il ne devrait plus y être
la seule et unique façon pour qu il puisse de nouveau apparaître c est que je me déconnecte et me reconnecte
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
9 mai 2021 à 21:36
9 mai 2021 à 21:36
Petite erreur que je viens de rectifier dans le code
Dans le if il faut vérifier que la variable est vide...
Et pas l'inverse tel que je l'avais fait.
Il faut donc enlever le point d'exclamation.
Dans le if il faut vérifier que la variable est vide...
Et pas l'inverse tel que je l'avais fait.
Il faut donc enlever le point d'exclamation.
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
>
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
9 mai 2021 à 21:38
9 mai 2021 à 21:38
Si malgré cette correction ça ne fonctionne toujours pas comme tu le souhaites merci de faire un var_dump des variable de session et de nous montrer ce que ça donne à la première ouverture et à la seconde ouverture de la page
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
9 mai 2021 à 22:39
9 mai 2021 à 22:39
jordane merci pour la correction
ah super cela semble fonctionner ...je vais faire de vrais tests sr mon site
néanmoins j ai une question
concernant cette variable
($_SESSION['story'])
es ce bien une variable de session de nom "story" que l on ouvre pour le pop up
et que l on ferme lors de la deconnexion
car dans mon site lorsque je déconnecte l utilisateur j utilise ce code tout simple
et donc en ajoutant la variable de session story la session story est détruite
ah super cela semble fonctionner ...je vais faire de vrais tests sr mon site
néanmoins j ai une question
concernant cette variable
($_SESSION['story'])
es ce bien une variable de session de nom "story" que l on ouvre pour le pop up
et que l on ferme lors de la deconnexion
car dans mon site lorsque je déconnecte l utilisateur j utilise ce code tout simple
et donc en ajoutant la variable de session story la session story est détruite
<?php session_start(); session_destroy(); header('Location:index.php'); die();