Cette action permet d'afficher du contenu HTML, des fichiers, des images, des vidéos, du contenu Joomla et des sites web dans une fenêtre modale (popup)

Elle utilise le script Lightbox-Popup-Plugin-Flashy d'Avirtum

Cette action affiche des informations dans une fenêtre modale ou popup interne.

La fenêtre modale se pilote à la souris (swipe inclus), au clavier et au glisser sur mobile.

des ressources externes à la page

des sites web externes

Pour afficher un lien qui permet d'ouvrir un site web dans une fenêtre modale ou popup, il suffit d'écrire

{up modal=https://lomart.fr | label=Visiter le site lomart.fr}

Pour obtenir un aspect plus graphique, il est possible d'ajouter un paramètre class et/ou style

{up modal=//lomart.fr | label=Visiter le site lomart.fr | class=btn btn-primary}

Pour encore plus de souplesse, nous pouvons utiliser cette forme d'écriture

Voir le site
lomart.fr

{up modal=https://lomart.fr}
<div style="display:inline-block;padding:10px;border:1px #aaa solid;text-align:center">
  <img src="/images/logo-lomart/lomart.jpg" alt="lomart"/>
  <br>Voir le site<br>lomart.fr
</div>
{/up modal}

pour qu'une URL soit reconnue comme externe au site, elle doit commencer par au minimum 2 barres obliques //.
Cette formulation évite les erreurs entre http:// et https://.

Une carte Google

{up modal=https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2648.835624456595!2d2.697307115425584!3d48.402099740679375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e5f488ad7ca349%3A0xff5eea6f01c3ab80!2sCh%C3%A2teau+de+Fontainebleau!5e0!3m2!1sfr!2sfr!4v1531590870806}
  Voir la GoogleMap du Château de Fontainebleau
{/up modal}

Il suffit de "copier le contenu HTML" de la page "Partager > Intégrer une carte",
puis de le coller comme argument de modal en ne conservant que l'url.

<iframe src="/https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2648.835624456595!2d2.697307115425584!3d48.402099740679375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e5f488ad7ca349%3A0xff5eea6f01c3ab80!2sCh%C3%A2teau+de+Fontainebleau!5e0!3m2!1sfr!2sfr!4v1531590870806" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Des ressources locales

Pour afficher des fichiers présents sur le serveur, il faut écrire

Fichier texte

{up modal=images/actions-demo/modal/fichier-exemple.txt 
  | label=Voir un fichier texte 
  | width=450px | height=50vh
}

Dans cet exemple, nous précisons les dimensions de la fenêtre popup. En général, cela n'est pas nécessaire.

Fichier HTML

{up modal=images/actions-demo/modal/liste-couleurs-sures.html}
  un fichier HTML : liste des couleurs sûres
{/up modal}

Fichier PDF

{up modal=files/doc/UP-memo-actions.pdf | label=PDF des actions UP}

{ up pdf=files/doc/UP-memo-actions.pdf | btn | target=popup}

Du contenu Joomla

Il suffit de récupérer le code fourni par les boutons au-dessous des éditeurs
il est possible d'afficher uniquement le contenu en ajoutant &tmpl=component à la fin de l'URL.

Un article

{up modal=index.php?option=com_content&view=article&id=92&catid=14}
  Les icônes icomoon
{/up modal}

Un lien de menu

{up modal=index.php?Itemid=323&tmpl=component}

Un module

{up modal=html | label=afficher le module login | class=btn btn-primary}
  {loadmodule mod_login,Login Form}
{/up modal}

Des vidéos

Pour afficher des vidéos, c'est le même principe que pour les iframes : on indique l'url.

Vimeo

{up modal=//vimeo.com/272091470 | label=Saint-Malo et ses vagues sur Vimeo}

Youtube

{up modal=https://youtu.be/H9fa9aWFbLM | videoAutoplay=1}
  <img src="/images/actions-demo/modal/video-brel.jpg" alt="Brel"/>
{/up modal}

Pour cet exemple, nous utilisons une image comme lien pour ouvrir le popup. Nous avons également demandé que la vidéo démarre automatiquement.

Dailymotion

{up modal=https://www.dailymotion.com/embed/video/x361dwr 
  | label=<b>Une autre vidéo du grand Jacques</b>, <br>mais sur Dailymotion
}

L'option videoAutoplay n'est pas disponible pour Dailymotion. Vous pouvez remarquer au passage que les balises HTML sont autorisées pour l'argument de label.

Du contenu HTML inline

Pour afficher du code HTML saisi directement dans l'article, il suffit de saisir

Voir le contenu HTML entre les shortcodes

Un titre

du texte et des images

{up modal 
  | label=Voir le contenu HTML entre les shortcodes 
  | class=badge badge-primary
  | id=mon-id
}
<h1>Un titre</h1>
<p>du texte et des images</p>
<img src="/images/photos/brins-de-muguet-mini.jpg" >
{/up modal}

Le shortcode ouvrant précise le texte et la classe pour le lien. Le contenu de la popup est saisi entre les shortcodes ouvrant et fermant.

Dans l'exemple précédent, nous avons indiqué l'id afin de pouvoir l'utiliser dans un autre lien qui ouvre ce même popup. Cela peut-être pratique pour faire appel à la même information à différents endroits d'un document.

{up modal=#mon-id
  | label=un autre lien pour ouvrir le popup
}

Pour l'appel, il suffit d'indiquer l'ID sans oublier le dièse et le texte pour le lien (comme argument de label ou entre les shortcodes).

Des images

Une image unique

Pour afficher une seule image comme ci-dessus, il est possible d'utiliser ce shortcode. L'argument principal est le chemin et le nom de l'image.

{up modal=images/photos/Canyon-de-Chelly--National-Monument--Arizona-mini.jpg}

UP va générer ce code HTML :

<a href="/up.lomart-dev/images/photos/Canyon-de-Chelly--National-Monument--Arizona.jpg" class="up-93-16" title="Canyon de Chelly-National Monument-Arizona">
  <img alt="Canyon de Chelly-National Monument-Arizona" src="/up.lomart-dev/images/photos/Canyon-de-Chelly--National-Monument--Arizona-mini.jpg">
</a>

La balise a contient les données pour le popup et la balise img celle de la vignette.
Le code HTML est plus complet que notre shortcode car UP déduit des informations à partir du nom de l'image.

• le nom de l'image se terminant par -mini, UP va utiliser une grande image de même nom, mais sans le -mini, pour le popup.
• les balises alt et titre sont argumentés à partir du nom de l'image dans lequel les tirets simples sont remplacés par des espaces et les tirets doubles par des tirets simples. Le titre est visible au survol de la vignette et dans le bandeau au bas de la fenêtre modale.

Vous n'êtes pas obligés d'utiliser ces mécanismes, mais cela permet de réduire le poids de la page et évite la saisie fastidieuse (souvent oubliée) des attributs alt et title.

Une image unique avec lien texte

Pour alléger le texte, il est parfois pratique d'indiquer le lien vers une image en utilisant uniquement son nom. Cela est possible en l'indiquant comme argument de label

Pour l'exemple, voir la photo du Canyon de Chelly

<p>Pour l'exemple, voir la photo du {up modal=images/photos/Canyon-de-Chelly--National-Monument--Arizona-mini.jpg | label=Canyon de Chelly}</p>

Les formats d'images

Dans l'appel précédent, seuls les formats jpg,jpeg,png et gif sont reconnus. Dans la forme longue du shortcode, il est possible d'utiliser d'autres formats comme le SVG.

{up modal=image | l=600px | h=210px | titre=0}
<img src="/images/admin/joomla.svg" alt="Le logo Joomla au format SVG"/>
{/up modal}

Pour le SVG, il est nécessaire d'indiquer la taille du popup.
Au lieu des paramètres width et height, nous utilisons une fonctionnalité de UP qui permet d'avoir des équivalences pour le nom des actions et des options 🆙 Gestion traduction avec UP.

L'option title/titre permet de ne pas afficher le titre. La balise alt étant indiquée, elle n'est pas déduite du nom du fichier.

Une galerie d'images

UP permet de faire une galerie à partir de toutes les images trouvées entre le shortcode ouvrant et le shortcode fermant.

une photo verticale

une photo carrée

une photo horizontale

Ci-dessous le shortcode au format code, mais il est évident que vous pouvez faire la saisie en wysiwig. Il suffit juste de l'encadrer par les shortcodes UP sans oublier de mettre comme argument principal, le mot img, image ou images. Sans cette précision, c'est le contenu qui serait affiché dans la popup.

{up modal=img}
<divstyle="text-align:center">
  <div style="display:inline-block">
    une photo verticale<br>
    <img src="/images/photos/cornemuse-au-soleil-couchant-500x750-mini.jpg">
  </div>
  <div style="display:inline-block">
    une photo carrée<br>
    <img src="/images/photos/cornemuse-au-soleil-couchant-750x750-mini.jpg">
  </div>
  <div style="display:inline-block">
    une photo horizontale<br>
    <img src="/images/photos/cornemuse-au-soleil-couchant-1200x750-mini.jpg">
  </div>
</div>
<p></p>
{/up modal}

Cet exemple nous permet d'observer :

• on conserve la mise en page (responsive) texte-images
• l'image, quelque soit son homothétie, est entièrement visible dans la fenêtre modale
• le mécanisme -mini est utilisé
• les légendes et la balise alt sont construites à partir du nom de fichier. La première lettre est mise en majuscule.

Parcourir le contenu de toutes les modales d'une page

Nouveauté v3.0 Si vous indiquez le même ID pour plusieurs actions modal, vous pourrez parcourir leurs contenus à l'aide des fléches à gauche et à droite (1) et avoir un compteur de position (2).

Modal n°1 : 
{up modal=https://lomart.fr
| id=magalerie
| label=Visiter le site lomart.fr}
Modal n°2 : 
{up modal=html 
 | id=magalerie 
 | label=du contenu inline | id=magalerie}
{up lorem=1}
{/up modal}
Modal n°3 : {up modal=//vimeo.com/206256154 
 | id=magalerie 
 | label=Saint-Malo et ses vagues sur Vimeo}

Modal n°1 : Visiter le site lomart.fr

Modal n°2 : du contenu inline

Modal n°3 : Saint-Malo et ses vagues sur Vimeo

Infos webmaster

Options quasi-inutiles

Le code de l'action essaie de comprendre le type de données à afficher dans la fenêtre modale. Si le résultat n'est pas celui escompté, vous pouvez forcer le type de données avec l'option type qui peut prendre les valeurs : inline, iframe, image, video, ajax

Tableau d'interprétation de l'argument principal

Personnalisation

En tant que concepteur d'un site web, Up vous permet de personnaliser le rendu par défaut des actions. Cela facilite la saisie par vos rédacteurs, accorde le rendu au style du site et normalise la présentation.

custom/prefs.ini

Dans les paramètres de l'action modal, 4 options sont destinées aux webmasters :

• css-head : règles CSS qui seront ajoutées dans le head de la page.
  Exemple pour changer la couleur de l'overlay par un beau rouge:

  css-head="body.flashy-active .flashy-overlay [ background: rgba(255,0,0,0.4) ]"

• base-js-params : paramètres pour le script JS. Seules les options destinées à l'utilisateur final sont définies dans l'action. Vous pouvez utiliser toutes les autres options que vous trouverez dans la documentation du script. Dans le fichier custom/prefs.ini, il faut les saisir sous la forme :

  base-js-params="keyboard:0,showClass:'fx-fadeIn'"

• overlayClose : permet la fermeture de la fenêtre modale en cliquant sur la zone grisée autour du contenu
• close-left : si le template positionne le menu "hamburger" en haut à droite, il est judicieux de placer notre croix de fermeture en haut à gauche.

Vous pouvez personnaliser le rendu par défaut en indiquant la valeur des paramètres dans le fichier custom/prefs.ini.

SCSS/CSS dans le dossier custom

Vous pouvez dupliquer les fichiers SCSS, CSS et JS dans un sous-dossier custom de l'action. De cette façon, vos modifications resteront intactes lors des mises à jour. Attention, si vous apportez vos modifications directement dans le fichier CSS, ne copiez pas le fichier SCSS pour éviter qu'il l'écrase. Plus d'infos : 🆙 personnaliser le CSS de UP