Comment n afficher qu une seule fois une pop up
flexi2202
Messages postés
3822
Date d'inscription
Statut
Membre
Dernière intervention
-
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
flexi2202 Messages postés 3822 Date d'inscription Statut Membre Dernière intervention -
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é
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>
A voir également:
- Comment n afficher qu une seule fois une pop up
- Comment imprimer un tableau excel sur une seule page - Guide
- Pop up mcafee - Accueil - Piratage
- Pop corn time - Télécharger - TV & Vidéo
- Serveur pop - Guide
- Mettre une seule page en paysage word - Guide
13 réponses
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 ...
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>
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
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 )
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
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>
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>
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.
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
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
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
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();
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>
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;
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
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();