Créer des pop-up intelligentes

Openweb.eu.org > Articles  > Créer des pop-up intelligentes

Abstract

Comment ouvrir une nouvelle fenêtre sans se priver des internautes qui ne disposent pas de JavaScript ou l’ont désactivé ?

Article

Les pop-up, un mal nécessaire ?

Tout d'abord, faisons un point sur les pop-up, ces fenêtres qui s'ouvrent le plus souvent contre notre volonté. Ce genre de pratique est à bannir dans le cas où l'on ouvre une fenêtre de taille normale, par exemple pour un lien vers un autre site. En effet, on casse la navigation de l'internaute qui ne peut plus utiliser le bouton de retour et on impose ses choix. C'est une excellente façon de faire fuir le visiteur !

Mais il existe des cas où une pop-up rend de nombreux services : afficher une légende, une aide, une photo, etc. Seulement pour ouvrir cette fenêtre, il faut passer par un langage de script qui n'est pas forcément supporté par le navigateur de l'internaute, donc se priver de visiteurs.

Autant les faire proprement

Nous allons voir comment faire en sorte de n'oublier personne tout en conservant les pop-up dans notre arsenal. Il suffit tout simplement de n'ouvrir la fenêtre que si JavaScript est activé. Comment, me direz-vous ? Un exemple va nous aider.

<a href="page.htm" onclick="window.open('page.htm');"> 
    

Explications : le lien classique pointe vers la page de destination via href tandis que le onclick ne se déclenche que si la navigateur comprend JavaScript.

Astuce : —

Vous pouvez vous épargner de renseigner deux fois la destination en profitant d'un objet très utile en JavaScript : this. Cet objet fait référence à l'objet en cours, c'est-à-dire le lien dans notre cas. On peut donc appeler la destination comme ceci :

<a href="page.htm" onclick="window.open(this.href);"> 
      

Ça ne marche pas !

Si vous avez tenté de lancer cet exemple, vous avez sûrement constaté un problème. La nouvelle fenêtre s'ouvre bien mais l'ancienne est aussi dirigée vers la nouvelle page. Que s'est-il passé ? L'événement onclick se déclenche au clic de la souris et effectue l'action entre les guillemets mais l'événement continue sa route : on dit qu'il se propage. Il va donc poursuivre son action et déclencher le lien hypertexte indiqué par href. Pour éviter cela, il suffit d'arrêter la propagation en retournant false.


<a href="page.htm" onclick="window.open(this.href); return false;"> 
    

Les options possibles

Voyons maintenant les options possibles pour la pop-up. La syntaxe est :

window.open('URL', 'nom', 'options');
    
  • l'URL : il s'agit de l'adresse de la page ;
  • le nom : vous pouvez donner un nom à la fenêtre, par exemple pour éviter les fenêtres multiples. Si vous donnez le nom photo à votre fenêtre, un nouveau clic sur un lien remplace une éventuelle pop-up déjà ouverte, évitant de noyer l'internaute ;
  • les options :

    • height : la hauteur de la fenêtre (exprimée en pixels) ;
    • width : la largeur de la fenêtre (exprimée en pixels) ;
    • top : la position verticale de la fenêtre par rapport au bord supérieur de l'écran (exprimée en pixels) ;
    • left : la position horizontale de la fenêtre par rapport au bord gauche de l'écran (exprimée en pixels) ;
    • toolbar : la présence de la barre d'outils (à l'aide d'un booléen : yes ou no) ;
    • location : la présence de la barre d'adresse (à l'aide d'un booléen : yes ou no) ;
    • menubar : la présence de la barre de menu (à l'aide d'un booléen : yes ou no) ;
    • resizable : la possibilité de redimensionner la fenêtre (à l'aide d'un booléen : yes ou no) ;
    • scrollbars : la présence des scrollbars ou ascenseurs (à l'aide d'un booléen : yes ou no) ;
    • status : la présence de la barre de statut (à l'aide d'un booléen : yes ou no).

Le mieux étant bien sûr de laisser le maximum de liberté à l'internaute, par exemple : window.open('/img/logo.png', 'photo', 'height=100, width=200, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); ouvre une pop-up présentant notre logo. Cette fenêtre est dimensionnée, positionnée et elle conserve la barre de menu permettant d'imprimer l'image, tous les internautes ne sachant pas utiliser le clic droit. Elle peut aussi être redimensionnée, donc les « ascenseurs » ont été supprimés, l'image étant réduite.

Vous pouvez tester cet exemple.

Attention : —

Une erreur courante consiste à ouvrir une fenêtre non redimensionnable et sans barres de défilement. Si la police est réglée différemment, par exemple, il se peut qu'une partie de la page ne soit pas visible. Vous pouvez tester cet exemple.

Conclusion

Nous avons vu qu'accessibilité et ouverture ne signifie pas appauvrissement. Il est parfaitement possible d'ouvrir une pop-up tout en proposant des alternatives. Il suffit pour cela de respecter quelques règles simples pour permettre à chacun d'accéder à l'information selon ses possibilités et ses choix.

À propos de cet article

  • Openweb.eu.org
  • Profil : Expert
  • Thème : Accessibilité, Pages dynamiques
  • Auteur :
  • Publié le :
  • Mise à jour : 25 juin 2008
  • 24 commentaires

Vos commentaires

  • Victor Le 19 septembre 2010 à 00:06

    Merci pour cet article clair !

  • pyros Le 1er mars 2011 à 13:39

    Cet article est effectivement clair. Mais comment fait-on pour changer la couleur de fond d’une pop-up ? Background-color... n’est pas utilisable ? Merci par avance d’une réponse aussi claire.

  • Fabrice Bonny Le 2 mars 2011 à 09:34 En réponse à : pyros

    La page ouverte dans la pop-up n’est rien d’autre qu’une page normale. C’est donc dans le code de la page visée (page.htm dans mon exemple) qu’il faut modifier la feuille de style pour donner la couleur voulue.

  • Nautilebleu Le 8 mars 2011 à 10:28

    Pour signifier au navigateur de ne pas exécuter l’action par défaut, il est préférable de ne pas utiliser return false, qui interrompt totalement évènement (cela empêchera aussi l’évènement de bouillonner par exemple)

    Il est préférable d’utiliser event.preventDefault() ; (pour les navigateurs respectant les standards) .

    http://www.openjs.com/articles/prevent_default_action/

  • emilie Le 8 juillet 2011 à 19:43

    les explications marches aussi avec le logiciel izispot ?

  • Fabrice Bonny Le 11 juillet 2011 à 09:50 En réponse à : emilie

    Je ne connais pas du tout cet éditeur mais s’il permet de modifier directement le code HTML, vous pouvez bien entendu ajouter le code proposé dans cet article.

  • Arias Le 2 janvier 2012 à 17:24

    Bonjour,
    Et merci ! Cet article m’a bien aidé.
    Je me demande cependant s’il est possible de lancer ce type de fenêtre en modale

  • Rukamaru Le 28 août 2012 à 18:02

    Bonjour,
    Je ne sais pas si je suis le seul à avoir un problème mais en ce qui me concerne mon pop-up s’affiche sur une autre page..
    Combien y a t-il de pages en tout ?
    Je dispose deux pages :


    main.php :
    [...]
    Paroles
    [...]


    pop-up.html :

    texte

    <SCRIPT language="JavaScript">Popup();</SCRIPT>

    texte


    Je voudrais que mon pop-up s’affiche comme votre exemple, dans une petite fenêtre sur la même page.

  • Anonyme Le 30 août 2012 à 15:40

    merciii bcp

  • Fabrice Bonny Le 3 septembre 2012 à 10:00

    Il arrive que la pop-up semble s’ouvrir "ailleurs" si une autre page a déjà ouvert une pop-up qui n’a pas été refermée. Est-ce le cas ?

  • med Le 18 janvier 2013 à 10:14

    merci pour ce cour tres expliqué je vous souhaite une bonne contunuation

  • Bibi Le 4 mars 2013 à 14:18

    Bonjour, je pensais utiliser cette technique pour permettre aux internautes qui passent d’un site web A vers un site web B en cliquant sur un lien, de garder le site de départ en vue pour que l’internaute ne se sente pas "expulsé" vers B et puisse revenir à tout moment vers le site web A.
    Par contre si le lien ne fonctionne que si le PC est compatible java, cela va poser pb. Auriez-vous une suggestion ? Autre langage, autre technique ?

  • Fabrice Bonny Le 11 mars 2013 à 09:41

    Il est possible de ne pas passer par Javascript (et non Java comme vous le dites, ce sont 2 langages bien différents) en utilisant un lien de type <a href="…" target="_blank" title="lien vers blabla [ouverture d'une nouvelle fenêtre]">le texte du lien</a>. Attention à bien mettre un title pour prévenir les personnes aveugles, entre autre, de l’ouverture d’une nouvelle fenêtre et donc de la possibilité de revenir dans la première.

  • Dézo Yannick Le 1er juillet 2013 à 13:44

    Merci beaucoup pour ce cours.

  • Lau Le 29 septembre 2013 à 14:34

    Merci a vous
    pour le background de la fenêtre appelée il suffit de mettre un style dans la balise body
    de le page qui s’ouvre dans la fenêtre :

    <body style="background-color :#cceffa">

    Lau

  • Michel Le 26 novembre 2013 à 19:06

    Bonjour,
    J’ai une fenêtre popup qui pose problème avec le lien.
    J’ai ceci :
    a href="/articles/popup#" onclick ... modules/page_lecture_contrat.php etc.

    A la place du lien "modules/page_lecture_contrat.php" qui doit s’ouvrir en popup, j’ai l’url de la page en cours !

    Une idée ?

    Merci

    Lorsque je passe la souris sur le lien il indique

  • Michèle Le 14 mai 2014 à 12:29

    Bonjour à tous,
    Merci beaucoup pour cet article très utile. Une question de débutante : est-il possible d’intégrer les options de widow.open dans la feuille de style externe ? Si oui, de quelle manière ?
    D’avance, merci de votre réponse.

  • Fabrice Bonny Le 14 mai 2014 à 19:16

    Bonjour. Il n’est pas possible d’inclure les options de window.open dans une feuille de style externe (CSS) pour la simple raison que c’est du Javascript (JS).

  • Michèle Le 21 mai 2014 à 12:26

    Merci pour la réponse. Encore une question...de débutante (un peu moins)... sourire
    Dans l’exemple, la dimension du popup est indiquée en pixel. Est-il possible d’intégrer ces infos en %, pour rendre le design flexible. Ou est le JS admet seulement des mesures fixes ?
    D’avance, merci de votre réponse.

  • Fabrice Bonny Le 21 mai 2014 à 19:51

    Malheureusement, la fonction open n’admet que des pixels pour height et width.

  • didier Le 29 mai 2014 à 11:40

    c’est très astucieux ! Merci de cet outil.

  • said Le 11 septembre 2014 à 13:18

    merci bouceaup pour cette article je te demande le maniere de faire un pop under

  • chedev Le 14 décembre 2014 à 08:30

    Bonjour
    En dépit du "location=0" (ou =no ?), je n’arrive pas à me débarrasser de la barre d’adresse (celle ou figure l’adresse de la pop-up). Je voudrai pourtant avoir une pop-up la plus dépouillée possible.
    Comment est-ce possible ?
    Merci d’avance pour votre réponse.

  • lmalha Le 21 septembre à 23:05

    Page wap diseponible

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom