lightbox, overlay, popup

**hub94** · 17/07/2014, 17h06

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

**iakou** · 18/07/2014, 14h55

Bonjour.

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

container.html :

Code :

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

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 :

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

**hub94** · 18/07/2014, 15h00

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.

**hub94** · 18/07/2014, 15h25

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.

**iakou** · 18/07/2014, 16h47

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 :

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.

**hub94** · 18/07/2014, 17h56

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

Bonne journée.

lightbox, overlay, popup

JavaScript

Vue hybride

Discussions similaires

Partager

Partager