COMMENT CRÉER UNE FENÊTRE POPUP DANS UN ÉDITEUR VISUEL

Il peut être utile d'ouvrir un lien sur votre site ailleurs que dans le même onglet ou la même fenêtre du navigateur, par exemple dans une nouvelle fenêtre sous forme de "pop-up". Ce tutoriel vous guidera dans la création d'une fenêtre popup, dont le contenu peut être soit une page de votre site créée depuis le manager, soit une page HTML créée manuellement (avec un éditeur de texte brut par exemple).

Créer un lien en fenêtre popup vers une page de son site

Dans un éditeur visuel, vous pouvez créer un lien hypertexte qui ouvrira une fenêtre popup. 

Voici un exemple du résultat final obtenu : un exemple d'une fenêtre pop-up

  • Commencez par récupérer l'URL de la page qui s'ouvrira au clic sur le lien hypertexte. Dans notre exemple (à droite), l'URL de la page qui s'ouvrira est donc : http://www.phenix-computer.com/pages/tutoriels/configuration-avancee-du-site/comment-creer-une-fenetre-popup-dans-un-editeur-visuel.html
  • Dans l'éditeur visuel, sélectionnez le texte sur lequel vous souhaitez placer le lien, puis cliquez sur l'outil Insérer / éditer un lien dans la barre d'outils de l'éditeur visuel.
  • Dans la fenêtre qui s'ouvrira, cliquez sur le deuxième onglet Popup.
  • Cochez la case Popup javascript puis collez l'URL de la page de destination dans le champ "URL de la popup".  Vous pouvez fournir un titre pour le lien si vous le souhaitez, par exemple, le titre de la page.
  • Définissez une taille pour la fenêtre popup en pixels, puis choisissez la position pour la popup (où elle s'ouvrira sur l'écran du visiteur).
  • Selectionnez ensuite les divers options qui s'appliqueront à la fenêtre popup. Vous pouvez vous inspirer de l'exemple du lien ci-dessus, configuré avec les options de l'image de droite. Notez que cette étape est optionnelle.

Enregistrez ensuite le lien via le bouton Insérer , puis n'oubliez pas d'enregistrer la page, le widget ou autre élément dans lequel vous avez ajouté le lien.

Pop-up1

Pop-up2

Créer un lien en fenêtre popup vers un fichier HTML

Parfois, le contenu à afficher dans la fenêtre popup est déjà en HTML. Dans ce cas, vous pouvez l'afficher dans une page de votre site, puis lier cette page à une fenêtre popup.

Si vous préférez, vous pouvez créer une page HTML vous-même, la stocker dans l'espace de stockage "Fichiers" de votre site, et ensuite lier cette page à une fenêtre popup.

Pour notre exemple, nous avons créé une page en html toute simple, contenant juste la phrase "Ceci est un exemple de page html simple". Mais le fichier HTML de notre page aurait pu contenir n'importe quel contenu en HTML, comme un document Google Charts (Charts = Graphiques) par exemple.

L'image de droite présente la configuration d'un exemple de fenêtre popup avec un fichier HTML stocké dans le manager : cliquez ici pour voir le résultat final.

Dans un premier temps donc, il faut stocker le fichier dans votre espace de stockage, puis récupérer son URL (ce tutoriel explique comment récupérer les URLs des fichiers de l'espace de stockage). 

Pour créer la fenêtre popup ensuite, il suffit de procéder de la même manière que l'exemple ci-dessus.

Pop-up3

Pop-up4

Un exemple pratique

Cette fonctionnalité permettra d'avoir des contenus dynamiques indépendants de la navigation principale sur le site. Vous pourrez ainsi autoriser l'écoute d'un player ou d'une playlist sur une fenêtre popup indépendante de votre site. Créez d'abord la page contenant le lecteur, puis lier cette page à un lien dans un menu ou page du site, pour que le lecteur s'ouvre dans une fenêtre popup, et reste ouverte durant la navigation sur le site.

Ajouter un commentaire