Comment n afficher qu une seule fois une pop up

flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention - 9 mai 2021 à 22:39

bonjour a tous pour mon site
je viens de copier ce code sur boostrap
tout fonctionne bien et comme je le souhaites

a présent je souhaiterais sur la page d accueil de mon site
mais comment faire pour qu il ne puisse pas apparaître a chaque retour sur cette page d un utilisateur enregistre ou non enregistré

<!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>Bootstrap 4 .modal('hide') Method</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
    // Show modal on page load
    $("#myModal").modal('show');

    // Hide modal on button click
    $(".hide-modal").click(function(){
        $("#myModal").modal('hide');
    });
});
</script>
<style>
    .bs-example{
        margin: 20px;
    }
    /* Some custom styles to beautify this example */
    .hide-modal{
        width: 250px;
        position: absolute;
        margin: 0 auto;
        right: 0;
        left: 0;
        bottom: 20px;
        z-index: 9999;
    }
</style>
</head>
<body>
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->


    <!-- Modal HTML -->
    <div id="myModal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <p>Do you want to save changes to this document before closing?</p>
                    <p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Afficher la suite

13 réponses

Réponse 1 / 13
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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 ...
2

dugenou Messages postés 6262 Statut Contributeur 1 455

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.

<?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>

Réponse 3 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

bonjour Jordane
merci pour la reponse
mais quelle est la solution la plus facile et surtout celle ou je pourrais trouver un exemple
merci
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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 )
  
  0
Réponse 4 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question

flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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 3640 Date d'inscription Statut Membre Dernière intervention 190

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

 <?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 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
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
```
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.
0
1. flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190 > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention
  
  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
  
  0

Réponse 7 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
1. dugenou Messages postés 6262 Statut Contributeur 1 455
  
  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.
  
  0
Réponse 8 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

ah mince le message de dugenou est effacer
0
Réponse 9 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  Bonjour
  Si.
  Il suffit de supprimer la variable de session lorsqu'il se déconnecte.
  
  0
Réponse 10 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190
bonjour jordane
ah ok
donc le fichier de deconnexion ressemblerais a ceci
```
<?php 
    session_start();
    session_destroy();
    header('Location:index.php');
    die();
```
0

flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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

<?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 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830

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

  <!-- 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;

Réponse 12 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190

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
0
1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830
  
  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.
  
  0
  1. jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention 4 830 > jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention
    
    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
    
    0
Réponse 13 / 13
flexi2202 Messages postés 3640 Date d'inscription Statut Membre Dernière intervention 190
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
```
<?php 
    session_start();
    session_destroy();
    header('Location:index.php');
    die();
```
0

Comment n afficher qu une seule fois une pop up

13 réponses

Discussions similaires

Newsletters