# Pop-up (fenêtre)

> Découvrez comment personnaliser et utiliser le composant pop-up dans PandaSuite pour afficher des fenêtres contextuelles comme des formulaires d'inscription, des messages d'accueil, et plus. Apprenez à créer, ouvrir et fermer des pop-ups efficacement.

https://docs.pandasuite.com/fr/essentials/components/pop-up/

**Une pop-up est une fenêtre qui s'affiche au-dessus de l'écran en cours, elle contient généralement des informations contextuelles. Personnalisez le contenu de la pop-up et les actions pour ouvrir/fermer la pop up.**

Voici les principales utilisations de la pop-up : formulaire d'inscription, message d'accueil, message d'erreur, menu...

[Vidéo : dans un exercice de lecture, une pop-up « Bravo ! » s'ouvre sur l'écran grisé avec l'image découverte et une croix]

## Créer La Pop-Up

Cliquez sur Composants et insérez la **Pop-up**. Double-cliquez sur le composant pour ajouter le contenu de votre pop-up.

[Image : Pop-up en édition dans PandaSuite Studio : la carte Right answer! sur l'écran du quiz assombri, propriétés Pop-up à droite]

Insérez n’importe quel type d’objet : texte, image, composants etc.

Vous pouvez choisir la couleur de l’**Arrière-plan** et le niveau de transparence.

Vous pouvez créer plusieurs [états](https://docs.pandasuite.com/fr/essentials/interactions/understand-states/) pour animer le contenu de votre pop-up. Dans les propriétés, **État par défaut** fixe l'état affiché à chaque ouverture de la pop-up ; avec **Aucun défaut**, elle garde l'état dans lequel elle était. Pour que ces états suivent d'autres composants, ajoutez la pop-up à une [Synchronisation](https://docs.pandasuite.com/fr/essentials/components/synchronization/).

> **Info**
>
> La pop-up est automatiquement en plein écran. Si vous ne souhaitez afficher le contenu que sur une partie de l'écran, créez un popover avec le composant [Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/).

## Ouvrir La Pop-Up

Par défaut, votre pop-up s'ouvre automatiquement au clic sur la zone transparente : une action est automatiquement ajoutée. Vous pouvez la placer au-dessus de votre déclencheur, par exemple un bouton.

Pour ouvrir la pop-up autrement, choisissez un déclencheur et l'action **Agir sur un composant** > **Pop-up** > **Ouvrir la pop-up**.

## Fermer La Pop-Up

Par défaut, votre pop-up se ferme automatiquement au clic : une action est automatiquement ajoutée.

Pour fermer la pop-up autrement, choisissez un déclencheur et l'action **Agir sur un composant** > **Pop-up** > **Fermer la pop-up**.

> **Info**
>
> Pour améliorer l'expérience utilisateur, nous vous conseillons de prévoir une croix en haut à droite qui signale la fermeture de la pop-up à l'utilisateur.