📂
Atomic Suite
  • Documentation Atomic
    • Documentation utilisateur
      • Les Molécules
        • Créer une molécule
        • Afficher une molécule
          • Afficher toutes les molécules
          • Hooks
            • Afficher les hooks disponibles
            • Aucun hook à l'emplacement souhaité
          • Emplacement dans le Front Office
            • Sur toutes les pages
            • Sur l’accueil
            • Sur une fiche Produit
            • Sur une Catégorie ou Marque
            • Dans une Miniature Produit
            • Choisir plusieurs emplacements
          • Affichage conditionnel
            • Afficher une molécule temporairement
            • Afficher une molécule selon le type de produit
            • Afficher une molécule sur certaines pages
            • Afficher une molécule selon la taille d'écran
            • Afficher une molécule selon le groupe client
        • Dupliquer une molécule
        • Modifier l’ordre d'affichage des molécules
        • Liste des molécules
          • Méga menu
          • Menu mobile
          • Bannière
          • Carrousel
          • Contenu HTML
          • Lien
          • Liste de liens
          • Liste de catégories
          • Liste de produits
          • Liste d’articles de blog
          • Liste de miniatures personnalisées
          • Liste de marques
          • Miniature Produit
          • Miniature Catégorie
          • Titre
          • Image
          • Vidéo
          • Alerte
          • Modale
          • Container
          • Ligne
          • Menu déroulant
          • Séparateur
          • Onglets
          • Accordéon
          • Interstitielle
          • Widget commun
          • Widget PrestaShop
      • Performances SEO
        • Accéder aux configurations SEO
        • Connecter Google Search Console à votre boutique
        • Connecter un autre Webmaster Tool à votre boutique
        • Réduire l'impact des images sur le temps de chargement du site
        • Optimiser les images avec Atomic
        • Meta données
          • Éditer la balise Meta Keywords d’une page
          • Éditer le Titre d’une page
          • Réécrire l’URL d’une page
          • Éditer la Description d’une page
          • Réseaux sociaux
          • Activer l’option Knowledge Graph & Schema.org
          • Donner plus de visibilité aux contenus partagés sur les réseaux sociaux
      • Sécurité
        • CAPTCHA : introduction
        • Activer le reCAPTCHA sur votre site
      • Gestion du Cache
        • Le cache : introduction
        • Activer le cache
        • Gérer le cache des molécules
        • Gérer le cache du site via Atomic
        • Configuration de base du cache
        • Configuration du temps de sauvegarde du cache sur les pages de votre site
        • Configuration de la mise en cache partielle
        • Activer le cache pour les codes JS dans l'en-tête
        • Exclure une URL spécifique du cache
        • Exclure une IP spécifique du cache
        • Quand faut-il vider le cache ?
        • Vider régulièrement le cache d'une URL spécifique
        • Vider ponctuellement le cache de Atomic
      • Progressive Web App
        • PWA : introduction
        • Web App Manifest, les présentations
        • Configurer le manifest.json avec Atomic
        • Ajouter la web app à l'écran d'accueil
        • Les navigateurs compatibles
      • Général & Thème
        • "Ajouter au panier" dans les miniatures produits
        • Créer des champs personnalisés contenant des molécules (bêta)
    • Release Notes
      • Release notes Atomic Suite 2.1.1
      • Release notes Atomic Suite 2.1
      • Release notes Atomic Suite 2.0
      • Release notes Atomic Suite v1.6.0
      • Release notes Atomic Suite v1.5.1
      • Release notes Atomic Suite v1.5.0
      • Release notes Atomic Suite v1.4.3
      • Release notes Atomic Suite v1.4.2
      • Release notes Atomic Suite v1.4.1
      • Release notes Atomic Suite v1.4.0
      • Release notes Atomic Suite v1.3.6
      • Release notes Atomic Suite v1.3.5
      • Release notes Atomic Suite v1.3.4
      • Release notes Atomic Suite v1.3.3
      • Release notes Atomic Suite v1.3.2
      • Release notes Atomic Suite v1.3.1
      • Release notes Atomic Suite v1.3.0
      • Release notes Atomic Suite v1.2.0
  • DOCUMENTATION BLOG
    • Documentation utilisateur
      • Ajouter le lien à "Blog" au menu principal de votre site
      • Accéder aux configurations du module "Blog"
      • Créer une catégorie de blog
      • Modifier une catégorie existante
      • Créer une sous-catégorie de blog
      • Lier une catégorie de produits à une catégorie de blog
      • Créer un nouvel article de Blog
      • Ajouter du contenu à un article de blog
      • Planifier la publication d’un article
      • Modifier le contenu d’un article existant ou changer l’ordre d’affichage du contenu
      • Modifier les balises ou le titre d’un article existant
      • Associer un article à plusieurs catégories de blog
      • Créer des associations entre les articles de blog
      • Proposer une liste d’articles liés à l’article de blog affiché
      • Afficher des articles de blog sur la page catégorie
      • Lier un produit de votre boutique à un article de blog
      • Dupliquer un article existant pour gagner du temps
      • Utiliser le “Lazy loading” pour afficher les articles plus rapidement
      • Masquer un article ou une catégorie de blog
      • Afficher une grille d'articles sur la page d'accueil et les pages “Catégories”
      • Limiter le nombre d'articles à afficher sur les pages de blog
      • Afficher la liste des catégories sur la page d'accueil du blog
      • Les options d'affichage de la liste des catégories
      • “Masquer” la colonne de droite dans le blog
      • Faire défiler la colonne de droite avec la page
      • Afficher ou masquer l'auteur d'un article
      • Afficher ou cacher les options de partage des articles
      • Afficher (ou masquer) la description de l'article dans l'aperçu
      • Afficher des articles de blog sur une page produit
      • Changer l'ordre d’affichage des articles sur le blog
      • Connaître le nombre de lecteurs du blog
      • Créer des articles de blog fictifs dans un environnement de test
      • Définir l'URL racine du blog
      • Connaître le nombre de lecteurs du blog
    • FAQ
      • Articles : Pourquoi est-il important de saisir la date de création ?
      • Qu'est-ce que la balise Meta Title ?
      • Qu'est-ce que la balise Meta Description ?
      • Qu'est-ce que la balise Meta Keywords ?
      • Pourquoi avez-vous besoin d’une URL SEO friendly ?
    • Release notes
      • Release notes Blog 2.1.1
      • Release notes Blog 2.0
      • Release notes Blog v1.6.0
      • Release notes Blog 1.5.2
      • Release notes Blog v1.5.1
      • Release notes Blog v1.5.0
      • Release notes Blog v1.4.3
      • Release notes Blog v1.4.2
      • Release notes Blog v1.4.1
      • Release notes Blog v1.4.0
      • Release notes Blog v1.3.1
      • Release notes Blog 1.3.0
      • Release notes Blog 1.2.0
Powered by GitBook
On this page
  • Exemples d’utilisation
  • Options de configuration

Was this helpful?

  1. Documentation Atomic
  2. Documentation utilisateur
  3. Les Molécules
  4. Liste des molécules

Modale

PreviousAlerteNextContainer

Last updated 8 months ago

Was this helpful?

Lorsque vous créez une Modale, vous ajoutez également un bouton sur votre site. Au clic sur ce bouton, une pop-in apparaît.

A partir d'Atomic 1.4.3, la Modale permet également l’affichage d’une pop-in sans cliquer sur un bouton, à l’ouverture ou à la fermeture d’une page.

Exemples d’utilisation

  • Afficher les options de livraison sur la fiche produit.

  • Afficher un code de réduction.

Options de configuration

  • Ajout d’un titre du bouton pour afficher la modale

  • Choix du style du bouton

  • Gestion du contenu de la modal : titre et corps

  • Choix de la taille de la modale

  • Configurations des classes CSS