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

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 :

<!-- Scripts -->
<script>
 jQuery(document).ready(function($){
 var customTrigger = $('.custom--trigger'),
 customOverlay = $('.custom--overlay'),
 customModal = $('.custom--modal'),
 customClose = $('.custom--close');

 function overlayRemove() {
 customOverlay.on('click', function() {
 $(this).fadeOut(300, 'swing').removeClass('visible');
 customModal.fadeOut(300, 'swing').removeClass('visible');
 customClose.fadeOut(300, 'swing').removeClass('visible');
 });

customClose.on('click', function() {
 $(this).fadeOut(300, 'swing').removeClass('visible');
 customModal.fadeOut(300, 'swing').removeClass('visible');
 customOverlay.fadeOut(300, 'swing').removeClass('visible');
 });
 }

 customTrigger.on('click', function(e) {
 e.preventDefault();

 customOverlay.fadeIn(300, 'swing').addClass('visible');
 customModal.fadeIn(300, 'swing').addClass('visible');
 customClose.fadeIn(300, 'swing').addClass('visible');

 overlayRemove();
 });
 });</script>

Dans le module bouton

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

 

Créez une seconde section

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. Tout d’abord, dans l’onglet Contenu, définissez la couleur de l’arrière-plan à rgba(255,255,255,0) pour qu’il soit transparent (nous donnerons plus tard en CSS une couleur à l’overlay de notre modale).
Ensuite, sur votre section, rendez-vous dans l’onglet Avancé -> ID et classes CSS -> Classe CSS et précisez custom--modal pour dire que c’est cette section qui s’affichera dans la modale.
Enfin, ajoutons un peu de CSS dans Avancé -> Personnaliser CSS -> Element principal car par défaut nous voulons que cette section soit masquée et ne s’affiche qu’au clic sur notre trigger.

display: none;
width: 100%;
Maintenant vous pouvez ajouter dans cette section autant de lignes que vous le souhaitez, ainsi que les modules dont vous avez besoin.  

 

Placez l’overlay et le bouton “fermer”

Afin que l’overlay et le bouton permettant de fermer la modale soient bien positionnés 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 :

<!-- Overlay -->
<div class='custom--overlay'></div>

<!-- Bouton fermer -->
<div class='custom--close'>M</div>
 

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 -> Général -> Personnaliser les CSS.
Vous remarquerez que la ligne 7 correspond à la couleur de fond de l’overlay, à éditer selon vos envies…

.custom--overlay {
    z-index: 100000;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    background: rgba(0,143,193,0.95); /* MODIFIER COULEUR DU FOND DE LA MODALE */
    width: 100%;
    height: 100%;
 }

.custom--overlay.visible {
    display: block;
}

.custom--modal {
    z-index: 150000;
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    transform: translate(-50%, -50%);
}

.custom--modal.visible, .custom--close.visible {
    display: block;
}

.custom--trigger {
    cursor: pointer;
}

.custom--close {
    display: none;
    font-family: "ETmodules";
    font-size: 70px;
    color: white;
    z-index: 150000;
    position: fixed;
    top: 5%;
    right: 2%;
    cursor: pointer;
}

Quelques Solutions alternatives

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

D'autres tutoriels pouvant vous intéresser: