Modal

Un Modal est une fenêtre contextuelle (popup) ou une boîte de dialogue qui recouvre le contenu d’une page et avec laquelle il est généralement nécessaire d’interagir de manière à revenir à la page.

Ajoutez une popup à votre conception en allant sur +Add > Helpers > Modal.

Ajouter des éléments à un Modal

Un Modal se compose d’un calque transparent et d’un conteneur div. Tout élément peut être inséré dans le conteneur div.

Pour insérer un élément dans un Modal, sélectionnez-le, puis choisissez n’importe quel élément dans le menu +Add. Vous pouvez également faire glisser des éléments dans le Modal, comme n’importe quel autre conteneur.

Styling et Configuration

In-editor behavior – Comportement dans l’éditeur

Ce paramètre détermine l’affichage du Modal dans la zone de prévisualisation d’Oxygen.

• Inline – en ligne : Le Modal sera affiché en ligne avec le reste du contenu de la conception
• Live preview – aperçu en direct : Le Modal apparaîtra comme en situation réelle, se superposant au contenu de la conception
• Hidden – masqué : Le Modal sera complètement masqué.

Trigger – Déclencheur

Ce paramètre détermine la condition faisant apparaître le Modal.

• After number of clicks – Après un nombre de clics : Spécifiez un nombre de clics après lequel le Modal sera affiché.
• After number of page views – Après un nombre de pages vues : Spécifiez un nombre de pages vues après lequel le Modal sera affiché.
• On page scroll – Au défilement de la page : Indiquez si le Modal est affiché après que l’utilisateur ait fait défiler un pourcentage spécifique de la page ou lorsque l’utilisateur ait fait défiler la page vers le haut.
• After specified time – Après un délai spécifique : Spécifiez un nombre de secondes après lequel le Modal sera affiché.
• After time inactive – Après un temps d’inactivité : Spécifiez un nombre de secondes d’inactivité de l’utilisateur après lequel le Modal sera affiché.
• On exit intent – Lors de l’intention de sortie : Affiche le Modal lorsque l’utilisateur tente de quitter la page.
• On scroll to element – Lors du défilement vers un élément : Spécifiez un élément qui déclenchera le Modal lorsqu'il entrera dans la zone d’affichage. Utilisez le bouton Choose, puis cliquez sur l’élément devant déclencher le Modal ou entrez l’ID de l’élément dans le champ.
• User clicks element – Lors d’un clic de l’utilisateur sur un élément : Spécifiez un élément qui déclenchera le Modal lorsque l’utilisateur cliquera sur l’élément. Utilisez le bouton Choose, puis cliquez sur l’élément devant déclencher le Modal ou entrez l’ID de l’élément dans le champ.

Vous pouvez également spécifier la fréquence d’affichage du Modal pour un même utilisateur à l’aide du menu déroulant After Modal is Shown.

• Show again on every page load – Afficher à nouveau à chaque chargement de page : La popup sera affichée chaque fois que la page est rechargée et que le déclencheur réglé se produit.
• Never show again – Ne pas afficher à nouveau : La popup sera montrée une fois à un utilisateur, puis jamais remontré à cet utilisateur.
• Show again after – Afficher de nouveau après… : Spécifiez un nombre de jours après lequel la popup sera à nouveau présentée à un utilisateur.

Content Styles – Apparence du contenu

La zone Content Styles vous permet de définir la disposition des éléments du Modal, l’alignement des éléments à l’horizontal ou à la verticale, la couleur du texte et la couleur de fond.

Modal Styles – Apparence du Modal

• Width – largeur : Définissez la largeur totale du Modal L'unité par défaut est en %, mais vous pouvez définir px ou vw en cliquant sur le symbole % et en choisissant une autre unité.

• Backdrop Color – couleur de recouvrement : Définissez la couleur de la page lorsque le Modal apparaît. Si vous ne voulez pas de recouvrement, déplacez le curseur alpha sur 0.
• Modal Position – position du Modal : Définissez la position du Modal

Closing – Fermeture

Ce paramètre vous permet de déterminer le comportement de fermeture du Modal.

• Close Modal Automatically – fermer automatiquement : Si oui, vous permet de spécifier un nombre de secondes après lequel le Modal disparaîtra de lui-même.
• Close on ESC key – fermer avec la touche ESC : Si oui, appuyer sur la touche ESC provoquera la fermeture du Modal.
• Close Modal On Backdrop Click – fermer par un clic sur l’arrière plan : Si oui, cliquer sur en dehors du Modal le fermera.
• Insert Close Button – Insérer un bouton de fermeture : Insère un bouton qui, lorsqu’il est cliqué, ferme la popup. Tout élément avec la classe .oxy-close-modal agira comme un bouton de fermeture, vous permettant d’utiliser des icônes et d’autres éléments comme bouton de fermeture pour votre Modal.

De plus, vous pouvez utiliser JavaScript pour fermer un Modal via la fonction oxyCloseModal(). Cette option offre aux utilisateurs avancés plus de flexibilité pour déterminer quand et comment fermer une popup.

/*	Always use oxyCloseModal()
 *	after the full DOM is loaded
 *	ie. on the document ready event
*/
jQuery( document ).ready( function() {

	// check if the function is defined (we may be on a page without modals)
	if( typeof oxyCloseModal !== 'undefined' ) {
		// close the first open modal found
		oxyCloseModal();

		// close a specific modal, if found
		oxyCloseModal( document.getElementById('myNewsletterModal') );
	}
} );

Greg C. / Ph. Reskator