Créer des modaux dans Générateur d'IU

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 3 minutes de lecture

    • Utilisez des fenêtres modales avec des Générateur d'IU composants pour fournir des alertes ou des appels à l’action à un utilisateur. Générateur d'IU est fourni avec des fenêtres modales pour gagner du temps et des efforts.

    Ce que sont les modaux

    Les fenêtres modales, également appelées boîtes de dialogue, sont des fenêtres qui se superposent à une autre fenêtre de contenu. Les fenêtres modales prennent le contrôle de l’expérience utilisateur. Les utilisateurs ne peuvent pas interagir avec la fenêtre superposée tant que la fenêtre modale n’est pas fermée. Les fenêtres modales peuvent contenir différents types de contenu, notamment :
    • Texte statique
    • Texte dynamique
    • Formulaires
    • Images
    • Boutons

    Générateur d'IU a des modaux préconfigurés disponibles. Vous pouvez ajouter un modal à votre composant. Ensuite, configurez le contenu du modal et la façon dont il s’affiche à l’écran. Ajoutez un gestionnaire d’événements au modal pour effectuer une action lorsqu’un utilisateur le sélectionne. L’action peut alerter un utilisateur à propos de quelque chose ou lui demander de confirmer une action. Une fenêtre modale est un moyen de s’assurer qu’un utilisateur sait ce qui se passe. Par exemple, un modal peut demander à un utilisateur de confirmer une sélection avant de poursuivre l’action qu’il effectue sur la page principale.

    Anatomie modale

    Les fenêtres modales dans Générateur d'IU peuvent avoir :
    • En-tête du modal
    • Contenu modal
    • Bouton Fermer la boîte de dialogue (aucune action effectuée par le modal)
    • Au moins un bouton modal (une action peut être effectuée par le modal)

    Diagramme montrant les différentes parties des modaux.

    Types de modaux

    Différents types de modaux sont disponibles dans , comme indiqué dans Générateur d'IUle tableau suivant.

    Type de modal Description
    Alerte Une fenêtre modale d’alerte fournit des informations relatives à l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, vous pouvez avoir une fenêtre contextuelle d’alerte qui indique à l’utilisateur qu’il ne peut pas annuler une action de suppression.
    Confirmer Une fenêtre modale Confirmer demande à un utilisateur de confirmer l’action du composant. Par exemple, lorsqu’un utilisateur appuie sur un bouton de suppression, il doit confirmer la suppression des données. Vous pouvez choisir les options de confirmation dans les champs d’étiquette du bouton primaire et secondaire, tels que Oui/Annuler.
    Confirmer et détruire Un modal Confirmer et détruire est plus directif, généralement lié à la suppression ou à l’effacement de contenu. Il permet à l’utilisateur de connaître la gravité d’une action et lui demande s’il souhaite poursuivre l’action.
    Personnalisé Les fenêtres modales personnalisées traitent des scénarios qui ne sont pas traités à l’aide des fenêtres modales standard. Les fenêtres modales personnalisées peuvent être considérées comme un composant de conteneur dans une fenêtre modale. Vous pouvez ajouter une mise en page, des composants, des événements et des ressources de données personnalisés comme vous le feriez sur une page. La fenêtre modale personnalisée utilise des mises en page pour vous permettre de concevoir entièrement les informations que vous souhaitez y ajouter. Les mises en page décident également où se trouvent les informations dans l’écran modal. Vous pouvez utiliser le style CSS (Cascading Style Sheets) pour modifier l’aspect visuel du modal.
    iframe Utilisez iframe pour importer du contenu dans votre fenêtre modale à partir d’un contenu iframe existant à partir d’une URL et de données.
    Fenêtre modale Transmettez dynamiquement du contenu dans votre fenêtre modale Viewport via une liaison d’événements à l’aide d’un script client.

    Gestionnaires d’événements et modaux

    Exposez des événements à des modaux pour gérer les événements d’appel à l’action. Par exemple, une action primaire, une action secondaire, etc. Vous configurez les données en ajoutant un gestionnaire d’événements et en invoquant une ressource de données. C’est aussi simple que d’ajouter un nouveau gestionnaire d’événements pour le composant qui a un modal. Vous pouvez également ajouter un gestionnaire d’événements au modal lui-même. Sélectionnez l’événement que vous souhaitez associer au composant ou au modal et ajoutez-le. Voir pour Ajouter un modal au composant des instructions détaillées.