modal ~ du contenu dans une popup

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

➠ modal : Affiche du contenu dans une fenetre modale (popup)

Cliquer pour lire la documentation

les types autorises sont : inline, iframe, image, video, ajax
syntaxe 1 : {up modal=contenu popup | label=texte du lien}
syntaxe 2 : {up modal=vide,'html','images' ou contenu | label=texte lien}contenu{/up popup}
si vide ou 'html' : le contenu du popup est le code entre les shortcodes
si 'img' : chaque image du code entre les shortcodes sera un popup
sinon on analyse la valeur du paramètre pour determiner son type
- video vimeo, youtube ou dailymotion {up popup=//youtu.be/H9fa9aWFbLM}
- image unique si {up popup=images/xx.jpg} ou png, ...
- bloc inline si id de bloc {up popup=#bloc}
- iframe si url {up popup=//lomart.fr} ou {up popup=doc/xx.pdf} ou {up popup=?index/...}
on peut forcer le type par type=inline, iframe, image, video, ajax
author LOMART version 1.0 license GNU/GPLv3 credit https://www.jqueryscript.net/lightbox/Lightbox-Popup-Plugin-Flashy.html
  • modal: contenu ou type de contenu
  • type: pour forcer le type : inline, iframe, image, video, ajax
  • class: classe(s) pour bloc label
  • style: style inline pour bloc label
  • label: texte du lien pour afficher le popup
  • close-left = 0: croix de fermeture en haut à gauche. haut-droite par défaut
  • base-css: règles CSS definies par le webmaster (ajout dans le head)
  • base-js-params: règles JS definies par le webmaster (ajout dans init JS)
  • overlayClose = 0: 1 pour fermer la fenêtre modale en cliquant sur la zone grisée autour du contenu
  • videoAutoPlay = 0: 1 pour demarrer la video a l'ouverture du popup
  • gallery = 1: 0 pour traiter les images individuellement
  • title (titre) = 1: afficher le titre
  • width (l,largeur,w): largeur avec unite. Ex: 80%, 500px, ...
  • height (h,hauteur): hauteur avec unite. Ex: 80%, 500px, ...

    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

    Visiter le site lomart.fr

    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

    {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

    Voir la GoogleMap du Château de Fontainebleau
    {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.

    Récupération code gmap
    <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
    {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.


    {up modal=images/actions-demo/modal/liste-couleurs-sures.html}
      un fichier HTML : liste des couleurs sûres
    {/up modal}
    Fichier PDF
    {up modal=phocadownload/doc/UP-Memo-actions.pdf | label=PDF des actions UP}
    

    Il est possible d'afficher un fichier PDF en utilisant la fonction mise à disposition par le navigateur client. Pour s'assurer du rendu sur les appareils mobiles, préférez l'action pdf en mode popup.

    { up pdf=phocadownload/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

    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=198 
      | label=Les démonstrations des actions UP
    }

    Un module

    afficher le module login
    {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.

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

    {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.


    {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
    {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

    Canyon de Chelly-National Monument-Arizona

    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.

    Le logo Joomla au format 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.

    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.

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

    une photo verticale
    Cornemuse au soleil couchant 500x750
    une photo carrée
    Cornemuse au soleil couchant 750x750
    une photo horizontale
    Cornemuse au soleil couchant 1200x750

    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.

    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

    argument de modal type contenu popup
    vide ou 'html' inline contenu HTML entre shortcodes
    #... inline ancre vers un contenu HTML existant (ID)
    'img', 'image' ou 'images' image chaque image séparemment sous forme galerie
    *.jpg, *.png, ... image l'image indiquée
    *youtu*, *vimeo* video vidéo
    sinon URL iframe contenu url

    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 :

    • base-css : 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:
      base-css="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 : Programmation : personnaliser une action