Discussion :

[xCirdan]

Bonjour !

Pour un projet je dois réaliser un popup (qui s'ouvre une seul fois quand on veut quitter la page et qui propose de s'inscrire à une newsletter ) dont voici le code HTML :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- POPUP -->
    <div class="modal fade" id="bounceModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="container">
          <div class="row">
            <div class="col-md-6">
              <div class="thumbnail center well well-sm text-center">
                <h2>Inscris toi à notre <b>#Newsletter !</b></h2>
                <p>Et reçois chaque mardi notre condensé des news Tech <br>
                  <b>qu'il ne fallait pas manquer.</b></p>
                <img src="images/newsletter.gif" allowfullscreen="" frameborder="0"
 
                  height="480" width="480"> <br>
                <br>
                <form id="frm_subscribe" action="index.php" method="post">
                  <div class="input-group"> <span class="input-group-addon"> @
                    </span> <input class="form-control" id="email" name="email"
 
                      placeholder="Entrer votre adresse email" type="email"> </div>
                  <br>
                  <input id="oui" value="S'abonner à notre Newsletter" class="btn btn-primary btn-lg active"
 
                    type="submit"> <input id="non" value="Non merci" class="btn btn-secondary btn-lg active"
 
                    type="button"> </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- END POPUP -->

et le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
        $(function() {
  function addEvent(obj, evt, fn) {
    if (obj.addEventListener) {
      obj.addEventListener(evt, fn, false);
    } else if (obj.attachEvent) {
      obj.attachEvent("on" + evt, fn);
    }
  }
 
  addEvent(document, "mouseout", function(e) {
    e = e ? e : window.event;
    var from = e.relatedTarget || e.toElement;
    if ((!from || from.nodeName == "HTML") && e.pageY < $(window).scrollTop()) {
      $('#bounceModal').modal();
    }
  });
});

Problème :

Le popup doit pouvoir se fermer et ne plus s'ouvrir quand on clique soit sur le bouton s’inscrire ou sur le bouton non merci . J'ai donc mis en place un script qui selon moi devrait permettre cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$('#non').click(function(e)
    {
    $('#bounceModal').fadeOut();
    });
    $('#oui').click(function(e)
    {
    $('#bounceModal').fadeOut();
    });
});

Le script marche pour le bouton non mais pas pour le bouton oui qui est un submit . En effet après avoir cliqué sur submit le popup se ferme mais se ré ouvre si on veut quitter la page ... Je voulais donc savoir si vous avez une solution à mon problème !

Cordialement ,

Rayan

[ma5t3r]

salut,
Pas d'autre solution que de sauvegarder le click sur "oui".

Soit en base de données
soit dans le locastorage

[ABCIWEB]

... ou encore dans un cookie

[ma5t3r]

Exact ABCIWEB, je n'y ai pas pensé parce que je n'en utilise jamais.
Il y a aussi les variables de session.

[ABCIWEB]

Oui ce ne sont pas les mêmes avantages. L'avantage du cookie par rapport au localstorage c'est que le serveur peut le récupérer avant l'affichage de la page et donc php pourrait générer le html nécessaire en fonction du contenu de ce cookie pour les prochaines connexions. Cela dit dans ce cas puisqu'il s'agit de s'inscrire à une newsletter on peut consulter la bdd et générer le html en fonction de l'inscription ou non à la newsletter. J'ai parlé du cookie sur le principe car il peut rendre encore des services pour un affichage personnalisé - sans que javascript soit obligé de modifier le DOM par la suite - mais ce n'est pas forcément le plus adapté dans ce cas de figure