Article du fil d'actualités de CreaWeb2B

N'hésitez pas à commenter et partager

Ouvrir du contenu dans une popup sans plugin

par | DIVI, Tutoriels, Webdesign

Un nouveau tutoriel relatif à une question posée dans le groupe facebook Divi Theme Tutorials.

Le principe est de pouvoir ouvrir une image dans une popup (lightbox) à partir d’un lien. Il existe des extensions pour le faire, mais il est clair aussi que DIVI implémente déjà un système de popup puisque la bibliothèque Magnific popup est présente.

Plutôt qu’ajouter une extension, on va s’appuyer sur Magnific popup pour ouvrir un contenu dans une popup.

C’est relativement simple, il nous suffit d’initialiser notre instance de popup et de lui indiquer ce qu’on souhaite ouvrir à l’intérieur.

Exemple de résultat que vous pourrez obtenir :

En cliquant sur le lien « Show inline popup » on ouvrira une image dans une lightbox :

Pour arriver à ce résultat, on va utiliser 3 modules dans le DIVI builder.

    • Le premier sera un module code, qui contiendra l’initialisation de la popup
    • le second un module texte qui contiendra le lien d’appel
    • et le dernier un module image qui contiendra l’image à ouvrir dans la popup.

Notez qu’on pourrait trés bien n’utiliser qu’un seul module code pour tout faire, et notez aussi qu’on peut utiliser un module texte ou code en lieu et place du module image si l’on souhaite ouvrir autre chose qu’une image.

La structure est donc la suivante pour mon exemple :

Dans le module code, je vais ajouter le code suivant :

<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery('.popup').click(function(e) {
			e.preventDefault();

			jQuery.magnificPopup.open({
				items: {src: jQuery(this).data('content-id')},
				type: 'inline',
				closeMarkup:'<button title="Fermer(esc)" type="button" class="mfp-close">×</button>'
			});

		});
	});
</script>

Ce code cible le clic sur un élément de classe « popup » et ouvre dans une popup le contenu de l’élément HTML dont l’id sera indiquée au sein de « data-content-id ».

Dans le module texte, on crée notre lien et on indique l’id de l’élément HTML à appeler en guise de contenu :

<a class="popup" href="#" alt="" data-content-id="#thepop">Show inline popup</a>

Démonstration (cliquez sur ce lien)

Notez que l’on peut utiliser le même code pour lancer la popup depuis une image en ajoutant notre média au sein de la balise a :

<a class="popup" href="#" alt="" data-content-id="#thepop"><img src="https://linktoyourimage" alt="yourimagealt"></a>

Notre lien est de classe « popup » il appelera donc une popup quand on cliquera dessus. L’id de l’élément HTML appelé est « thepop ».

La dernière chose à faire c’est définir un élément HTML avec cette id.

Dans mon exemple, j’utilise un module image auquel je donne l’id « thepop » et la classe « mfp-hide » (trés important, c’est cette classe qui cache le contenu avant l’appel de la popup)

Dans la zone CSS de votre module image, ajoutez donc l’id « thepop » et la classe « mfp-hide » :

Par défaut, la popup est pleine largeur, mais vous pouvez lui apporter le style que vous voulez. Par exemple ici j’ai limité la largeur à 1280px et changé la couleur et taille du bouton pour fermer la popup :

/* Largeur du conteneur spécifique  */
.mfp-content {max-width:1280px;}

/* Couleur et taille de police du bouton de fermeture de la popup (on positionne top:0; pour éviter un saut du bouton vers le haut à la fermeture de la popup) */
.mfp-close-btn-in .mfp-close {
color: #fff;
font-size: 40px;
top:0;
}

En utilisant un module texte ou code en lieu et place du module image, on peut appeler un shortcode en guise de contenu et obtenir des résultats du style :

Un carrousel dans une popup, ou encore :

un formulaire dans une popup…

On peut donner un style bouton à notre lien d’appel, et aussi utiliser une image en guise de lien.

Si vous souhaitez utiliser un module BOUTON pour ouvrir du contenu au sein d’une popup, vous devez ajouter un module bouton, puis lui donner la classe « popup-2 ».

Ensuite, mettez l’id css du module ou section cible dans le champ URL du module bouton.

Le code sera légèrement du précédent dans la mesure où on va récupérer la valeur du lien (contenu du champ URL) :

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.popup-2').click(function(e) {
e.preventDefault();

jQuery.magnificPopup.open({
items: {src: jQuery(this).attr('href')},
type: 'inline',
closeMarkup:'<button title="Fermer(esc)" type="button" class="mfp-close">×</button>'
});
});
});
</script>

Avant de clore ce tutoriel, je vous propose de découvrir une autre solution pour arriver à un résultat similaire (et toujours sans plugin), proposée sur le blog de Julien Guiard.

A propos du Brandy

A propos des boissons de l'été

A propos des fruits frais