Une Page créée avec l’Éditeur Visuel du CMS Knowledge Place peut afficher un ou plusieurs contenus tiers en pop-up.

Pour chaque contenu tiers à afficher en pop-up, la Page doit comporter :

• Un Bloc de type Module Code, qui définit le contenu tiers à afficher et les paramètres d’affichage du pop-up
• Un ou plusieurs Blocs de type Section, Ligne, Colonne ou Module, sur lesquels l’utilisateur pourra cliquer pour déclencher l’affichage en pop-up du contenu tiers défini dans le Module Code

Créer le Module Code qui définit le contenu tiers à afficher en pop-up

Pour afficher un contenu tiers en pop-up, le Module Code doit définir un shortcode kps_popup.

Ce shortcode doit définir deux paramètres obligatoires, class et src, les autres paramètres étant optionnels et disposant de valeurs par défaut.

Les paramètres du shortcode kps_popup sont les suivants.

• class : un nom de classe CSS utilisé pour identifier le contenu tiers
• src : l’URL complète du contenu tiers ou le chemin obtenu dans le Gestionnaire de Fichiers
• height :  la hauteur en pourcentage (90% par défaut)
• width : la largeur en pourcentage (90% par défaut)
• border-color : la couleur de la bordure en code hexadécimal (#666 par défaut)
• border-size : la largeur de la bordure en pixels (2px par défaut)
• icon-color : la couleur de l’icône de fermeture du pop-up en code hexadécimal (#666 par défaut)
• icon-size :  la taille de l’icône de fermeture du pop-up en pixels (70px par défaut)
• icon-top : la marge supérieure de l’icône de fermeture du pop-up en pixels (12px par défaut)

Pour créer ce Module Code et définir le shortcode kps-popup :

1. Ajoutez un Module de type Code
2. Depuis l’onglet Contenu, cliquez sur le volet Texte
3. Sous Code, définissez le shortcode en précisant tous ses paramètres ou uniquement les paramètres obligatoires comme dans l’exemple ci-dessous :

[kps_popup
class=pptbigbrutedefault
src="resources/PPTs/BigBrute_intro/BigBrute_intro.html"
]

Paramétrer le ou les Blocs qui déclenchent l’affichage du contenu tiers en pop-up

L’ouverture du pop-up peut être déclenchée par un clic sur un ou plusieurs autres Blocs de la Page.

Tous les types de Blocs peuvent être utilisés : Section, Ligne, Colonne et Module.

• Tous ces Blocs doivent être paramétrés avec une classe CSS dont le nom doit correspondre à la valeur du paramètre class du shortcode kps_popup du Module Code qui définit le contenu tiers à afficher
• Pour certains contenus tiers, tels que ceux générés par HTML5Point, la valeur # doit être définie pour la propriété Lien de ce Bloc pour que le clic sur le Bloc déclenche l’affichage du pop-up 

Dans l’exemple présenté en bas de page, un Module Bouton est utilisé pour déclencher l’ouverture d’un contenu tiers en pop-up.

Pour reproduire cet exemple, depuis le fenêtre des paramètres d’un Module Bouton, onglet Contenu :

1. Cliquez sur le volet Texte
2. Sous Bouton, donnez un nom au Bouton
3. Cliquez sur le volet Lien
4. Sous URL du lien du bouton saisir la valeur # si le clic sur le Bloc ne déclenche pas l’affichage du popup
5. Sous Bouton Lien Cible , depuis la liste déroulante de choix sélectionnez Dans la même fenêtre
6. Cliquez sur l’onglet Avancé
7. Cliquez sur le volet ID et Classe CSS
8. Sous Class CSS, entrez le nom de la classe CSS qui doit correspondre à la valeur définie pour le paramètre class du shortcode kps_popup

Pour compléter cet exemple, un Module Icône a été créé avec les mêmes paramètres et le volet Visibilité de l’onglet Avancé a été utilisé pour afficher le Module Bouton uniquement sur ordinateur de bureau et sur tablette, et le Module Icône uniquement sur smartphone.