ℹ️ 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
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 :
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
- 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.
Dans le module Bouton
Dans l’onglet Avancé -> classe CSS, précisez : dc–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.
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 :
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.
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.)
Merci pour ce tuto ! Une question pour aller plus loin.
Je me suis inspirée de ce modèle pour créer un pop up selon mes besoins, qui s’ouvre à partir d’une image.
J’ai plusieurs images, et j’aimerai que chacune ouvre un pop up avec un contenu différent. Comment faire ?
Merci d’avance pour ta réponse !
Pour avoir plusieurs modales, il faut ajouter de nouveau noms de classes pour la modale et le trigger.
Tu peux aussi utiliser le plugin gratuit Popups for Divi qui est léger et fonctionne très bien pour de la popup simple.
Merci pour ton retour. Je dois passer à côté de quelque chose : je tourne et retourne la question dans tous les sens, je ne parviens à aucun résultat. Je t’épargne liste de tous les essais que j’ai fait, elle serait trop longue.
Peux-tu préciser comment il faut s’y prendre ou donner un exemple stp ?
J’ai testé Popups for Divi, ça à l’air très bien mais là non plus je n’y arrive pas. Mon cadre est vide…
Bonjour, j’ai suivi ce tuto, mais problème, les textes de ma modale sont flous, que ce soit sur firefox ou chrome. Le souci vient de la ligne “position: fixed;” dans le css de la custom modal .custom–modal . Une solution pour remédier à ce problème?
Je n’arrive pas à reproduire le problème que tu cites… tu aurais une URL à partager pour que je puisse visualiser ?
Bonjour Pierre, alors je n’ai pas trop compris, le bug s’est corrigé. J’avais tenté de mettre la zone “code” dans le template de divi et non la page (pour éviter de devoir le copier partout), je pense que cela est dû à ça. Par contre j’ai un autre souci, j’ai crée plusieurs boutons sur ma page https://audreychampion.fr/tarifs/ , j’ai fais un test, le formulaire s’affiche, je clique sur envoyer pour tester, je referme le popup, mais si je reclique sur un des boutons, le formulaire reste en mode “message envoyé” et n’affiche plus le formulaire. Une astuce?
Pour le formulaire, c’est normal car celui-ci nécessite un rechargement de la page.
Après, tu trouves ça étrange car tu fais des tests, mais un utilisateur ne fait que rarement des soumissions multiples.
Mais quoi qu’il en soit, le module “Formulaire” de Divi ne sait pas faire ça. Il faudra s’orienter par exemple vers Caldera Forms.
Bonjour Pierre.
Bravo pour cette astuce qui répond à mes attentes. Je buttes quand même sur quelque chose. A priori, pour faire plusieurs modales, il suffit de changer le nom de classes de la modale et du trigger. C’est à dire ? Il faut les changer où ? Dans le code de départ et dans les classes/ID des sections je suppose. C’est ce que j’ai fais mais ça ne fonctionne pas. Faut-il aussi dupliquer le code CSS dans les options Divi autant de fois que l’on souhaite de modale ?
Pour infos, j’ai donné le nom “plan–modal” et “button-trigger” pour faire un essai avec 2 modales.
Est ce qu’il faut respecter un langage particulier ou une langue particulière ?
Merci d’avance pour tes précieuses lumières;)
Merci pour ce tuto. Juste une question: je ne parviens pas à modifier la couleur du background de l’overlay. Je modifie dans le css de mon thème enfant à la ligne 7 comme expliqué, mais ca ne change rien.
y a -t-il une subtilité qui m’a échappé ? Merci pour ton aide !!
Essaye de vider ton cache car il n’y a pas de subtilité. 🙂
En effet 😀
Merci infiniment
Bonjour, est-ce que ça peut fonctionner pour afficher des projets en modale (le problème étant que je n’ai pas vraiment de bouton, mais un clic sur mon visuel de portfolio…) ?
Dans ce cas, je te conseille d’utiliser l’excellent plugin Portfolio Posts Pro qui est très souple et complet.
Hello,
Il faut effectivement dupliquer tout le code en modifiant à chaque fois le nom des classes et identifiants en fonction du nom que tu auras assigné à la modale 😉
Bonjour Pierre, merci pour votre tuto ça fonctionne très bien pour moi ! Le seul problème étant que maintenant que je n’ai plus l’ancien éditeur divi et ne peut donc faire qu’avec le visual builder, ma section modale disparait dès que je met le “display : none”, même en mode builder. Je ne peux donc plus y accéder, rajouter ou modifier quoi que ce soit dedans. Avez-vous un conseil pour m’aider à résoudre ce problème ?
Merci !
Il suffit de passer en affichage filaire. 😉
C’est justement ce que je n’arrivais pas à faire, mais c’est bon j’ai enfin trouvé après de longues recherches : pour ceux qui auraient le même problème que moi, il suffit d’aller dans les options de divi (Divi > Options du thème) puis de choisir l’onglet “Créateur” puis l’onglet “Avancé” et de bien activer l’éditeur classique (dernière option de l’onglet Avancé). Il me semble qu’il faut aussi activer la dernière expérience divi builder (option juste au dessus) mais ça je l’avais déjà coché car j’avais vu ça en cherchant comment passer en mode filaire.
Bonjour, Avant tout merci pour ce tuto il est top !
Je viens d’installer le module pour un client sans problème mais mon contenu est très important et j’ai besoin d’installer une barre de scroll sur le module, sinon tout le texte n’est pas visible. Peux-tu me dire où et comment l’installer (je ne suis pas une pro du code…)
Merci d’avance pour ton aide
Vanessa
Salut Vanessa, ton module ne permet pas le scroll automatiquement?
Sinon il faut que tu lui donnes une taille maximale, et ensuite que tu utilises la propriété CSS suivante: overflow: scroll;
Tiens nous au courant.
Bonjour, cela ne fonctionne plus avec la dernière maj Divi (ou une précédente)!
Le modal s’affiche avec sa flèche de fermeture mais plus aucun contenu n’est visible.
C’est le cas pour votre démo aussi…
Pouvez-vous mettre à jour le tuto?
Cdt,
Vlad
Merci pour votre vigilance, je viens de passer un (grand) moment 😅 à corriger la démo ainsi que l’article.
Merci et bravo Pierre, j’ai mis à jour sur mon site: c’est ok!
Super ! 👍🏻
Merci Pierre !
Bonjour, merci pour cette actualisation, j’ai bien modifié et cela fonctionne. Cependant, est-il possible d’adapter facilement le contenu en adaptant la modale en fonction de l’écran sur lequel c’est affiché ?
Situation actuelle : affichage parfait sur grand écran (iMac 24″) mais le haut et le bas est tronqué sur des écrans plus petits (MacBook Pro 15″ par exemple).
Merci
Ajoute un overflow vertical à ta section. Comme ça, si le contenu dépasse la hauteur de l’écran, tu auras un ascenseur pour scroller et voir l’intégralité.
Bonjour,
Merci pour le tuto. Vous n’avez pas de problème en mode repsonsive ?
Bon effectivement je suis au niveau du menu
Bonjour, merci pour le retour sur l’overflow vertical, finalement le contenu a été adapté 😉
Cependant, si nous souhaitons mettre plusieurs modale sur la même page, devons-nous dupliquer tout le code css ou pouvons nous attribuer le même code pour plusieurs modales contenu dans “.dc-modal {
xxx
xxx
}” ?
Si oui, de quelle façon le noter dans le code css svp ? (je n’ai aucune connaissance en css et pratique à la volée). Merci encore !
Bonjour,
Merci pour votre tuto !
Par contre lorsque je teste la modale de votre démo sur mobile, il y a 2 soucis :
– la page en arrière-plan défile quand même puis se bloque
– on ne peut pas scroller sur la modale qui est coupée…
Avez-vous des solutions ?
Merci beaucoup
Bonjour à tous 🙂 !
Je viens de faire un test de ce tuto (très facile d’accès au passage, merci), malheureusement lors du clic sur le bouton, cela ne fait que recharger la page sans rien n’afficher d’autre…
Je compte me servir de cette technique pour faire un menu fullscreen facilement.
Est-ce qu’avec les dernières mises à jour cette technique fonctionne encore ?
Merci d’avance ! 🙂
Bon weekend,
Thomas
Je t’invite à vérifier ton code, tu as certainement une erreur dans le lien du bouton déclencheur pour que la page se recharge.
Si c’est pour faire un menu plein écran sur mesure, j’avais écrit un tuto sur le sujet.
Regarde dans mon tuto sur le menu plein écran, tu trouveras quoi ajouter afin de désactiver le défilement de la page lorsque la modale est affichée.
Et pour autoriser le scroll sur la modale en elle-même, il suffit d’aller dans les réglages de la section concernée : “Avancé -> visibilité -> débordement vertical -> visible”.
Bonjour !
Avec la nouvelle mise à jour, au lieu de s’afficher au clic, la modale s’affiche d’entrée de jeu à l’écran… Sauriez-vous comment y remédier ?
Merci !
Bonne soirée