lightbox, overlay, popup

Version imprimable

17/07/2014, 17h06
hub94

lightbox, overlay, popup

Bonjour,

Tout d'abord, je ne suis pas un grand développeur et j'ai donc quelques difficultés sur les lightbox.

Je cherche à faire la chose suivante :

Lorsque la page index.php de mon site s'affiche, je souhaite générer, à l'ouverture de la page, une lightbox ( popup ou overlay, je ne sais plus vraiment comment on doit les appeler ) contenant un formulaire de 2 champs un pour l'email, et 3 boutons radio pour faire un choix.
A partir de cette lightbox, soit la personne peut la fermer à partir d'une croix en haut à droite, soit elle la ferme en ayant rempli le formulaire et après avoir cliqué sur le bouton valider.

Si la personne remplit le formulaire, il faut que les données soient stockées en base dont je créerai évidemment la table correspondante.

Ca fait 2 jours, presque 3 que j'essaie de trouver un script me permettant de faire cela mais j'avoue rencontrer quelques difficultés.

Je pense que pour les développeurs chevronnés que vous êtes, cela ne doit pas être bien compliqué. Donc si l'un d'entre vous veut bien me donner un coup de main, j'en serais ravi.

Bonne fin de journée à tous et avec un peu d'avance merci pour votre aide.

A++

Bonjour.

Je vous ai "bricolé" 2 pages qui correspondent à ce que vous décrivez :

container.html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<html><head>
     <script type="text/javascript">
     function OpenChildWindow()
     {
     window.open ("childWindow.html", "_blank", "width=400, height=300, left=400, top=200");
     }
    </script>
</head>
<body onload="OpenChildWindow()">
     <h2>JE SUIS LA PAGE MERE :</h2>
     ( <a href="#" onclick="OpenChildWindow()">Rappeler la pop-up</a> )
</body></html>

childWindow.html :

Code:

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
34
35
36
37
38
39
40
41
42
43
44
45
<html><head>    
<script type="text/javascript">
     function verif()
     {
     tableau = document.getElementsByTagName("input") ;
     n = tableau.length ;
     compteur = 0 ;
     for ( i=0; i<n; i++ )
          {
          if ( tableau[i].type=="checkbox" && tableau[i].checked )
               {
               action = tableau[i].value ;
               compteur++ ;
               } 
          }
     if ( compteur == 1 )
          log = " " ;
     else 
          log = "Vous devez cocher une checkbox ! " ;
     chaine = document.getElementById('emad').value ;
     if ( ! /^[\w.-]+@[a-z0-9.-]{2,}\.[a-z]{2,6}$/.test(chaine ) )
          log = "Syntaxe adresse-mail incorrecte" ;
     document.getElementById('msg').innerHTML = log ;
     document.getElementById('emad').focus() ;
     if ( log == " " )
          {  
          message   = "A la place de cette boite de dialogue,\r\n" ;
          message += "et à l'aide de window.opener.location.replace, \r\n" ;
          message += "vous solliciterez une nouvelle page,\r\n" ;
          message += "avec en query-string : ?mail=" + chaine + "&action=" + action + " !" ;         
          alert (message) ;
          window.close();          
          }
     }
</script>
</head><body style="font: 16px verdana;" onload="document.getElementById('emad').focus()">
     <br><label>e-mail address :</label>
     <br><input name="address" id="emad"  type="text" maxlength="40" style="width: 300px;" value="">
     <br><input type="checkbox" value="inscription" > : Inscription
     <br><input type="checkbox" value="desinscription"> : Desinscription
     <br><input type="checkbox" value="contact"> : Nous contacter
     <br>     
     <br><input type="submit" value="Submit" onclick="verif()">
     <span id="msg" style="font: italic 16px Times; color: red;"></span>         
</body></html>

Elles fonctionnent !... Vous pouvez les tester et les adapter.
Personnellement j'aurais utilisé un menu déroulant plutôt que des checkboxes, (+ facile à maintenir, et pop-up + concise)

18/07/2014, 15h00
hub94

Avant même de tester le code que vous m'avez envoyé, je vous remercie déjà beaucoup du temps passé à le faire.
Je vais le tester et vous tiens au courant.

Merci encore.

Bonne journée.
18/07/2014, 15h25
hub94

Je viens de charger les 2 fichiers et tester le script.
Au premier chargement de la page, j'ai la phrase "je suis la page mère" qui s'est affichée avec le lien "rappeler la popup" en dessous.
La popup ne s'est pas ouverte au chargement de la page.

Et lorsque j'ai fait cmd+R pour recharger la page container.html ( je suis sur mac ) en m'assurant que le dièse n'y était plus, j'ai eu le droit à une page blanche.

Plutôt qu'un pop-up "classique", je souhaiterais une fenêtre type lightbox. Je ne sais pas si vous voyez ce que c'est, loin de moi l'idée de douter de vos connaissances. Mais j'ai surtout envie d'être le plus clair possible. Pourquoi ce type de box ? Parce que cela passe tous les bloqueurs de popups connus à ce jour ( en tout cas, je crois mais peut-être en savez-vous plus que moi ).

En terme de config, je suis donc sur Mac et navigue avec Safari. Je ne sais pas si cela vous est utile.

Merci encore pour votre aide.
18/07/2014, 16h47
iakou

L'aviez vous dit que vous étiez sur Mac ?...

- J'ai écrit ça sur un PC sous Window7. et je peux vous assurer que cela fonctionne!...
- Là vous n'arrivez qu'à ouvrir la page mère, puis il se vautre à la première instruction Javascript : onload="OpenChildWindow()...
- Normal, le script demande d'ouvrir une Window or vous êtes Mac !...

J'ai lu ça quelque part :

Citation:

Si vous utilisez Safari, le Safari barre de menu cliquez sur Safari> Préférences, puis sélectionnez l'onglet Sécurité.
Décochez bloquer Les fenêtres pop-up.
18/07/2014, 17h56
hub94

Non effectivement, je ne l'avais pas dit mais sans aucune intention de cacher quoique ce soit.

Bonne journée.
18/07/2014, 20h09
iakou

No problem !
Mais avez-vous testé ce que je vous ai dit à propos de SAFARI ?
Apparemment votre navigateur favori autorise les pop-up Window !...Non ?...
Si vous ne testez pas, vous ne saurez jamais... Et moi non plus...

Oui effectivement en enlevant la sécurité, ça fonctionne. Mais la popup que vous m'avez fait afficher est un pop-up "classique".
Et c'est super sympa de me l'avoir proposé mais ce n'est pas exactement ce à quoi je souhaite arriver.

Vous trouverez ci-dessous le lien redirigeant vers une page de test :
http://www.le-crowdfunding.com/testiframe.html

En cliquant sur le lien, cela fait apparaitre le genre de fenêtre que je souhaite faire charger automatiquement à l'arrivée sur la page.

En la voyant ce sera plus parlant pour vous.

Mon souci là, c'est que la fenêtre s'ouvre mais ne récupère pas le contenu à afficher.

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html>
<head>
<script type="text/javascript" src="fancybox/lib/jquery-1.10.1.min.js"></script>
 
	<!-- Add mousewheel plugin (this is optional) -->
	<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
 
	<!-- Add fancyBox main JS and CSS files -->
	<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.5"></script>
	<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
 
	<!-- Add Button helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
 
	<!-- Add Thumbnail helper (this is optional) -->
	<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
 
	<!-- Add Media helper (this is optional) -->
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">

Code:

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
    $("#iframe").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'type'              : 'iframe'
    });
});

Code:

1
2
3
4
5
6
7
8
</script>
  <meta charset="utf-8">
  <title>iframe</title>
</head>
<body>
<a id="iframe" href="http://www.google.fr/">Lien vers une iframe</a>
</body>
</html>

18/07/2014, 22h16
iakou

Oui effectivement c'est "classe" !... (aucune comparaison à faire avec une pop-up)

Apparemment c'est une Iframe, ça je sais faire...
Mais pas la croix en "décalé" dans le coin supérieur droit ???...
C'est du Jquery tout ça... Non ?...

Il était inutile de copier le code !... J'ai fait click droit > Afficher la source...
18/07/2014, 22h26
hub94

Pour la croix, c'est bon.
Maintenant, elle fonctionne.

Je me suis basé sur un module qui s'appelle fancybox, que j'ai installé et que j'essaie de personnaliser comme je peux. :-)
Effectivement, on parle d'iframe et en remplaçant l'url de google par un fichier html, c'est bon elle récupère.

Maintenant, ma problématique est de réussir à générer cette popup ou cette lightbox automatiquement au chargement de la page.

J'ai beau mettre onload dans le body, ça ne marche pas. Mais je pense que je dois faire une erreur de fonction à appeler ou de syntaxe.

Si vous savez comment faire, je suis preneur.
18/07/2014, 22h44
iakou

C'est drôle !
Ce n'est pas cela que je voulais dire !
Je sais manipuler des Iframes ! mais pas avec des croix dans les coins !... (je suis incapable de les définir ainsi)
Les fancybox sont apparemment une routine jquery.
Encore faut-il se plier à Jquery ! Si vous avez le temps, vous allez y arriver, il faut lire....
On m'a déjà conseillét de m'intéresser à Jquery, mais je refuse l'obstacle... Je ne sais même pas si il existe une doc en français sur chaque appli...
20/07/2014, 10h42
NoSmoking

Bonjour,
dans ton cas il me semble que tu te compliques la vie.

Qu'est une lightBox?
- une page HTML sur laquelle on fait apparaitre une "boîte".
- entre la page et la boîte il y a une couche opaque qui rend inaccessible la page.
Cela se résume donc à trois couches page -> couche opaque -> boîte, les 2 couches supplémentaires se superposent via la propriété CSS z-index.

Dés l'instant où tout appartient à la même page tu n'a pas de problème de gestion pour afficher/masquer la boîte et la couche opaque ou pour soumettre ton formulaire.
Cela se résume à 4-5 lignes de javascript et à pas mal de lignes de CSS.

Les plugins sont là pour gérer tous les cas qui peuvent se produire ce qui en fait souvent des usines à gaz si on les compare aux lightBox du début du siècles.
23/07/2014, 10h49
hub94

Autre fonction pour lightbox

Merci à tous pour votre aide. J'ai finalement trouvé la solution avec la collaboration d'un autre développeur et effectivement, on a optimisé le code avec des CSS et javascript.

Concernant cette lightbox ( voir les explications dans mon premier message), je souhaite faire autre chose.

Je souhaite en limiter l'affichage selon certaines conditions :
1 - Si l'adresse email est déjà présente en base ou a rempli quelque chose et cliqué sur valider
2 - Si au bout de X affichages de la lightbox, l'internaute n'a rien rempli et a cliqué sur la croix pour fermer

Pour la première condition, je pense qu'il faut d'abord sélectionner la table où l'adresse est égale à l'email recherché puis lui dire que si la requête est vraie alors on n'affiche pas la lightbox. C'est comme cela que je le vois mais peut-être avez-vous d'autres idées.

Pour la deuxième condition, j'avoue coincer parce que je ne vois pas comment compter les affichages de l'overlay et associer ce comptage à un utilisateur sans avoir stocké son adresse email ou autre info en base. Je me doute qu'il faut peut-être passer par l'ip, les sessions, les cookies mais je ne vois pas bien comment articuler tout cela.

Peut-être l'un ou l'une d'entre vous a une idée ? Si oui, je suis preneur.

Merci à tous pour votre aide.

Bien à vous.
23/07/2014, 19h04
NoSmoking

Elément de réponse :fleche: http://php.developpez.com/cours/?page=securite#sessions