IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

lightbox, overlay, popup


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut 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++

  2. #2
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Points : 479
    Points
    479
    Par défaut
    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)

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut
    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.

  4. #4
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut
    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.

  5. #5
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Points : 479
    Points
    479
    Par défaut
    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.

  6. #6
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut
    Non effectivement, je ne l'avais pas dit mais sans aucune intention de cacher quoique ce soit.

    Bonne journée.

  7. #7
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Points : 479
    Points
    479
    Par défaut
    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...

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut
    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 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
    <!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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  9. #9
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Points : 479
    Points
    479
    Par défaut
    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...

  10. #10
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut
    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.

  11. #11
    Inactif  
    Homme Profil pro
    Inscrit en
    Janvier 2014
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations forums :
    Inscription : Janvier 2014
    Messages : 374
    Points : 479
    Points
    479
    Par défaut
    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...

  12. #12
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122
    Par défaut
    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.

  13. #13
    Futur Membre du Club
    Homme Profil pro
    Consultant E-Business
    Inscrit en
    Juillet 2014
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant E-Business
    Secteur : Conseil

    Informations forums :
    Inscription : Juillet 2014
    Messages : 23
    Points : 8
    Points
    8
    Par défaut 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.

  14. #14
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 959
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 959
    Points : 44 122
    Points
    44 122

Discussions similaires

  1. Réponses: 3
    Dernier message: 10/10/2011, 17h13
  2. plugin popup avec overlay
    Par epeichette dans le forum jQuery
    Réponses: 0
    Dernier message: 22/03/2011, 10h54
  3. Lightbox s'ouvrant en popup (ok sous IE/pb sous FF)
    Par Sarolta dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 15/07/2009, 22h44
  4. Mettre un popup menu invisible ??
    Par Alberto dans le forum Composants VCL
    Réponses: 2
    Dernier message: 20/12/2002, 09h02
  5. Image popup d'une fiche à partir d'un TListImage
    Par FW-S dans le forum Composants VCL
    Réponses: 3
    Dernier message: 17/11/2002, 13h42

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo