Forum d'entraide PHPFrance

bonsoir a tous

j ai un code pour afficher un pop up avec une inscription a la newsletter
l utilisateur a donc le choix d entrer son mail ou alors tout simplement fermer la boite
tant que l utilisateur ne se déconnecte pas le pop up ne doit plus s ouvrir si l utilisateur revisite la page
par contre si il se déconnecte et se reconnecte le pop up s affiche de nouveau

cela fonctionne lorsque l utilisateur ouvre sa page pour la première fois le pop up est bien la

il rentre une adresse mail pour la newsletter et lorsqu il valide l adresse mail il est redirige vers une autre page de mon site pour confirmer l inscription a la newsletter (c est normal )
Mais lorsqu il revient sur la page
le pop up est de nouveau la si il rafraichit la page du pop up

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

car lorsque l utilisateur ferme le pop up avec la crois ou le bouton close , le pop disparaît durant le temps de la session

voici le code
merci de l aide

Code : Tout sélectionner

<?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/[email protected]/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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Salutations !

Lorsque tu accèdes à ta page, ton code javascript regarde la présence et la valeur de l'élément "story" dans l'objet sessionStorage du navigateur. Si cette valeur est absente ou différente de "true", alors il défini cette clé et ouvre la popup :

if (sessionStorage.getItem("story") !== 'true') {
   // sessionStorage.setItem('key', 'value'); pair
   sessionStorage.setItem("story", "true");
   // Calling the bootstrap modal
   $("#myModal").modal();
}

Pour éviter que la popup ne s'ouvre une fois l'utilisateur inscrit, il ne faut pas exécuter l'instruction $("#myModal").modal(); et tu as pour cela plusieurs solutions. En voici quelques unes :

- Solution javascript via sessionStorage : tu peux forcer l'ajout de la clé story en sessionStorage dans le navigateur lorsque l'utilisateur s'est inscrit, mais cette information ne sera valable que durant la session et à l'expiration de celle-ci, la popup pourra être à nouveau affiché.
- Solution javascript ou php via un cookie : il suffit de placer un cookie sur le poste de l'utilisateur lorsque celui-ci s'inscrit, ce qui te permet de consigner l'information d'une visite à l'autre (et dont tu peux gérer la durée de vie). Tu peux ainsi vérifier la présence et la valeur du cookie pour savoir si tu exécutes l'instruction ou pas. A noter : l'utilisateur peut toutefois refuser ou supprimer ce cookie.
- Solution php : il suffirait d'interroger ta base de données ou autre pour vérifier si l'utilisateur connecté est inscrit et contrôler depuis php l'affichage du bloc javascript dans la page

Chaque solution a des avantages et des inconvénients et tu peux même les combiner en fonction de ce que tu souhaites obtenir

bonjour Ryle
super un grand merci pour l explication
je vais donc voir ce que je peux faire avec toutes ces infos et précisions
c est vraiment gentil de m avoir explique cela

Forum d'entraide PHPFrance

Comment n afficher qu une seule fois une pop up

Comment n afficher qu une seule fois une pop up

Re: Comment n afficher qu une seule fois une pop up

Re: Comment n afficher qu une seule fois une pop up