popup

Vous recherchez un moyen d'attirer l'attention sur une information importante ou une offre commerciale, cette action devrait vous plaire.

Vous définissez un délai ou une position dans la page pour voir le contenu indiqué entre les shortcodes s'afficher dans une fenêtre surgissante.

Pour les besoins de la démonstration, je vais lancer plusieurs popups.
Cette pratique est déconseillée pour ne pas perturber vos visiteurs. Je pense qu'un seul popup pour l'ensemble du site est suffisant.

Un exemple simple

{up popup=2s}
contenu html du popup
{/up popup}

2 secondes après votre arrivée sur la démo, vous avez vu surgir une fenêtre définie par ces shortcodes :

{up popup=2s}
  {up flexbox=4-8 | tablet=6-6 | mobile=12-12 | class=bd-red bg-lightYellow fg-vcenter fg-gap p1}
    Le logo de UP
  {====}     2 secondes après votre arrivée sur la démo, vous avez vu surgir une fenêtre définie par ces shortcodes :
    {up popup=2s}
    contenu html du popup
    {/up popup}
  {/up flexbox}
{/up popup}

Le shortcode principal (surligné en jaune) affiche le contenu HTML qu'il encadre.

L'argument de popup détermine quand cet affichage doit se produire :

• après un délai en secondes si l'argument se termine par la lettre s
  
• après un déplacement dans la page du pourcentage indiqué, si l'argument se termine par le signe %
• dès l'apparition d'un bloc spécifié par son sélecteur css. ex: "bloc, #bloc1 ou div.bloc
• immédiatement si l'argument n'est pas reconnu ou égal à zéro

J'ai utilisé des actions UP pour définir le contenu affiché, mais tout contenu texte ou HTML peut convenir.
Je vous laisse consulter la démo de l'action flexBox et de la  feuille de style interne de UP

Les options (id="bloc-options")

{up popup=#bloc-options
 | scroll-offset=20-6
 | cookie-duration=-1
 | popup-style=p2; border:purple 5px solid; background:#FFF4
 | popup-position=CC
 | overlay-lock=0
 | overlay-style=background:radial-gradient(#fff4, #888d);border:25px dotted red 
 | close-only-button=0
 | close-style=top:40px;right:30px;background-color:purple
 | animation-in=anim-zoom-in
 | animation-out=anim-zoom-out
 | css-head=#id .popup-close:hover[transform:scale(1.5)]
 }
  {up box=crazy
   | title=popup
   | subtitle=une action qui a du punch ! 
   | image=images/actions/popup.png
  }
  Cette fenêtre a été réalisée avec l'action box et quelques corrections de son modèle crazy.
  {up div=tr}{up html=a | class=badge-rouge | href=#}action{/up html}{/up div}
  {/up box}
{/up popup}

×

popupune action qui a du punch !

Cette fenêtre a été réalisée avec l'action box et quelques corrections de son modèle crazy.

action

{up addCssHead}
.up-box-crazy .up-box-head .up-box-title {font-family:Verdana; padding-left:6px}
.up-box-crazy .up-box-head .up-box-subtitle {font-family:cursive}
.up-box-crazy .up-box-head .up-box-image{max-height:54px}
.up-box-crazy .up-box-body{font-family:cursive}
{/up addCssHead}

Options d'ouverture du popup

popup

l'option principale indique le moment où le popup doit s'afficher.
Dans notre cas, il doit apparaitre lorsque le bloc avec l'ID #bloc-options se trouve en haut de la partie visible de la page.
Un nombre suivi de la lettre S indique un nombre de secondes, le signe % donne la position dans la page et un sélecteur CSS cible le bloc.

scroll-offset

cette option, 3 par défaut, permet de régler l'intervalle de détection d'un déplacement. Comme le scroll n'est pas précis au pourcentage près, il est préférable de définir une plage.
Une valeur simple ajoute une tolérance avant et après l'emplacement demandé. Deux valeurs, séparées par un tiret, spécifient la tolérance avant et après.
Dans notre exemple, le popup apparait lorsque le haut du bloc #bloc-options est situé entre 20px avant et 6px après

filter

cette option que l'on retrouve dans plusieurs actions permet de limiter l'affichage à une condition. Aucun code HTML ne sera visible dans le site.
Par exemple, pour afficher une promo 5 jours avant et après Noël : filter=period:1220-1230.
Pour plus d'explications, voir  les options de filter

cookie-duration

Par défaut, il est à 0 pour afficher une seule fois le popup durant la session du navigateur client.
Vous pouvez indiquer le nombre de jours à attendre pour l'afficher à nouveau.
Pour faciliter le paramétrage de cette option, une valeur négative signifie que l'on n'enregistre pas de cookie.
Cela permet de revoir le popup en rafraichissant la page du navigateur. Je l'utilise ici pour vous permettre de revoir un effet en réactualisant la page.

IMPORTANT : pour une utilisation du shortcode dans un module personnalisé, forcer la valeur de l'id.
Exemple {up popup=2 | id=pubAAAAMM} ... {up popup}

Style et comportement du popup

popup-position

Cette option permet de choisir l'emplacement du popup en indiquant la position verticale et horizontale à l'aide de la première lettre des positions en anglais ou en français. Exemple: TR (top-right) ou HD (haut-droit)

Par défaut, un espace de 30px est préservé entre le popup et la fenêtre. Ajoutez une règle padding dans l'option overlay-style pour le modifier.

popup-style

Cette option permet de définir l'habillage du popup. Pour la démo, j'ai ajouté une bordure blanche de 5px avec un padding.
L'action propose la classe popup-base pour définir un fond blanc, un padding et une bordure arrondie dans la couleur primaire de UP.
Pour cibler un élément particulier du popup, je vous conseille d'utiliser l'option
css-base=#id .popup-content .votre_element[...]

overlay-lock

par défaut, lors de l'affichage du popup, le contenu au-dessous est bloqué. Il est impossible de déplacer le contenu du site (scroll)
Pour le permettre, indiquer 0 pour cette option

overlay-style

le terme overlay désigne le masque affiché sur la totalité de la page pour masquer/atténuer/enjoliver son contenu.

Par défaut, il affiche un voile noir à 50% que vous pouvez modifier en affectant l'attribut background avec une valeur rgba(0 0 0 / 50%) ou #0007.
Dans notre exemple, j'utilise un dégradé radial. 

Astuce: un padding permet de définir la marge entre le popup et le bord de la fenêtre.

close-only-button

par défaut, il faut cliquer sur le bouton close pour fermer le popup.
Cette option avec une valeur de 0 permet de cliquer n'importe où (sauf le popup) pour le fermer.

close-style

permet de modifier le bouton de fermeture du popup.

Par défaut, il se trouve sur l'angle droit du popup. La classe popup-close-left permet de le mettre en haut-gauche. Tous les emplacements sont permis en ajoutant des règles css comme : top:auto; bottom:-5px; pour en bas-droite. Ne pas oublier d'annuler les valeurs par défaut de top et right.
Pour la démo, j'ai déplacé le bouton vers l'intérieur et changé sa couleur en violet.

close-label

par défaut, le caractère Unicode UxD7 (×) est utilisée pour symboliser la croix de fermeture. Cette option accepte du bbcode, une action icon.

Animation

L'ouverture et la fermeture de la fenêtre popup peut-être animée.
Cette action propose 6 animations disponibles en version ouverture et fermeture. Il s'agit de simples classes CSS gérées par le script JS.

Vous pouvez créer une copie du fichier popup.scss dans le sous-dossier custom de l'action pour créer vos animations.

animation-in

Animations disponibles pour ouverture : anim-fade-in, anim-zoom-in, anim-slide-left-in, anim-slide-right-in, anim-slide-down-in, anim-slide-up-in

animation-in

Animations disponibles pour fermeture : anim-fade-out, anim-zoom-out, anim-slide-left-out, anim-slide-right-out, anim-slide-down-out, anim-slide-up-out

animation-target

Par défaut, l'animation est appliquée au popup, mais elle peut s'appliquer à l'overlay

{up addfilehead=//cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css} {/up div}

animation-in=animate__rubberBand
animation-target=overlay
overlay-style=animate__animated animate__delay-2s

Une utilisation en situation

Sur la page d'accueil de ce site, j'avais besoin d'attirer l'attention sur une nouvelle fonction dans le menu. C'est d'ailleurs pour cela que j'ai écrit l'action popup.

Je vous laisse examiner le shortcode qui ne présente pas de difficulté. Peut-être le padding de l'option overlay-style qui permet de descendre le popup pour ne pas cacher le menu.

Notez aussi l'option filter=! mobile qui empêche l'affichage de la popup sur les mobiles. Le point d'exclamation inverse la condition, soit pas mobile.

Le plus simple pour la fin

Ce dernier popup, affiché après un déplacement de 95% dans la page, est (presque) simple, du moins pour le contenu.

L'habillage de la fenêtre popup est réalisé par la classe popup-base. Il est placé en haut et à droite avec l'option popup-position.
Le bouton de fermeture est mis à gauche par la classe popup-close-left. Pour être en accord avec la bordure du popup, on modifie ses couleurs avec les classes de base de UP. J'ajoute des styles et classes pour la prise en compte du label.
Pour montrer les différentes possibilités pour le contenu du bouton close, j'ai mis un symbole avec l'action icon et du texte en bbcode avec traduction incorporée. Vous n'êtes pas obligé de faire aussi compliqué. Je voulais juste vous montrer les possibilités
L'animation n'est pas appliquée au popup, mais à l'overlay.

{up popup=95% | cookie-duration=-1
 | popup-style=popup-base
 | popup-position=HD
 | close-label={up icon=Ux1F892} lang[en=[b class=t-yellow]C[/b]lose; fr=[b class=t-yellow]F[/b]ermer
 | close-style=popup-close-left; bg-primary;t-white;bd-white; border-radius:4px; font-weight:normal; ph1
 | animation-in=anim-slide-left-in
 | animation-out=anim-zoom-out
 | animation-target=overlay
}
   <h2>Bravo, vous êtes arrivé à la fin de la démo</h2>
   <p>J'espère que cette action vous rendra de nombreux services. {up icon=Ux1F60A | class=fs150}</p>
{/up popup}

Note: j'ai mis les balises HTML pour le contenu, mais il est évident que la saisie est faite en wysiwyg.