Créez des fenêtres modales sans plugin - Divi Community

ℹ️ Mise à jour mars 2020 pour assurer la compatibilité avec Divi 4.x

Voici ma solution pour afficher une section Divi, avec une ou plusieurs lignes et les modules et shortcodes de notre choix, dans une fenêtre modale plein écran. Je vous présente également en fin d’article quelques autres méthodes envisageables.

Créez une première section

Créer une section pour ajouter le code pour afficher une modale plein écran dans Divi

Cette section est peut-être déjà existante dans votre template, tout dépend de votre mise en page… quoi qu’il en soit, c’est ici que vous allez ajouter un module Code et un module Bouton qui servira de trigger (déclencheur) pour ouvrir la modale.

Dans le module Code

Collez les lignes suivantes qui définissent comment s’affiche notre modale :

JS

Détaillons ce code

  • Lignes 3 à 5 : on définit des variables pour simplifier l’écriture et la lecture du code
  • Lignes 7 à 12 :
    • on créé la fonction qui se déclenchera lors du clic sur le bouton servant à afficher la modale
    • on déplace la section un peu plus haut dans le DOM afin qu’elle puisse passer par-dessus le header et le footer de Divi
    • on supprime la possibilité de faire défiler la page quand la modale est active
  • Lignes 14 à 25 :
    • on créé les fonctions permettant de fermer la modale et qui se déclenchent au clic sur le bouton de fermeture et sur la modale en elle-même.
      Le principe est de supprimer la classe .visible qui est ajoutée au clic sur le bouton qui affiche la modale
    • on rétablit la possibilité de faire défiler la page

Dans le module Bouton

Dans l’onglet Avancé -> classe CSS, précisez : dc–trigger

Créez une seconde section

La section qui est affichée comme modale plein écran dans Divi

C’est cette section qui contiendra les éléments qui s’afficheront dans la modale, il s’agit donc de lui appliquer quelques paramètres particuliers.

Contenu -> Fond

Définissez une couleur de fond pour votre modale, que vous la souhaitiez transparente ou opaque.

Style -> Dimensionnement

  • Largeur : 100%
  • Hauteur : 100vh

Avancé

  • “ID et Classes CSS -> Classe CSS” : attribuez la classe dc-modal
  • Poste (position) :
    • “Poste” : fixed
    • “Location” : sélectionnez le carré en haut au centre
    • Z-index : 200000

Placez le bouton “Fermer”

Afin que le bouton permettant de fermer la modale soit bien positionné au premier plan par rapport au contenu de la page, il nous faut placer le code HTML correspondant au plus proche de la balise de fermeture </body>.
(Et oui, parfois modifier la propriété CSS z-index ne suffit pas ;)… En savoir plus)
Allez donc dans options du thème Divi -> Intégration -> Ajoute du code dans la balise <body> et collez le code suivant :

HTML

Un peu de CSS pour terminer

Ce code est à ajouter soit dans le fichier style.css de votre thème-enfant, soit dans les options du thème Divi ou de la page.

Si vous voulez en savoir plus sur les diverses méthodes d’ajout de CSS à Divi, je vous invite à lire notre article 7 manières d’ajouter des CSS à Divi.

CSS

Détaillons ce code

  • Le premier groupe de lignes définit notre modale par défaut, donc non visible et avec un contenu centré verticalement
  • Le deuxième groupe de lignes permet de rendre visible notre modale et notre bouton “fermer”
  • Le troisième groupe de lignes ajoute un curseur en forme pointeur sur le bouton servant à afficher la modale ; c’est nécessaire car nous avons précédemment supprimé son rendu par défaut en JS
  • Le dernier groupe de lignes définit notre bouton de fermeture de modale

Quelques solutions alternatives pour conclure

Comment la plupart du temps, il existe plusieurs méthodes pour arriver à ses fins. Pour réaliser votre modale plein écran dans Divi, vous pouvez donc également utiliser :

  • un plugin gratuit comme Popup Maker (les popups créés sont des custom post types, il suffit donc d’autoriser le Divi builder pour les CPT et d’ajouter une touche de CSS)
  • un plugin payant tel que l’excellent Divi Overlay qui apporte des fonctionnalités plus poussées telles que des déclencheurs automatiques (au scroll, avec un délai, à la sortie de la page…), une dizaine d’animations d’ouverture, etc. À aujourd’hui, c’est le plugin le plus abouti pour une intégration dans Divi.
  •  la méthode proposée par Fabrice Esquirol qui exploite la librairie Magnific Popup, utilisée par Divi pour l’affichage des zooms sur les images (module Galerie, etc.)