---
sourceDocument: Yokohama Créer ou modifier des applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/fr-FR/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - fr-FR

ft:publication_title :

    - Yokohama Créer ou modifier des applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

Créer un bouton qui ouvre un modal
==================================

Créer un bouton qui ouvre un modal {#ariaid-title1}
===================================================

* Rversion finale: Yokohama
* 
* Mis à jour 30 janv. 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute de lecture

Une fois que vous avez créé votre expérience de démonstration et ajouté une page vide, vous pouvez modifier la variante de page si nécessaire. Pour les besoins de cette démonstration, vous pouvez créer un bouton et une fenêtre modale, et configurer le bouton pour ouvrir la fenêtre modale.

Avant de commencer
------------------

Rôle requis : ui_builder_admin

Procédure
---------

1. Ouvrez la page Générateur d'IU pour votre expérience de démonstration.  
   Figure 1. Générateur d'IU Éditeur visuel
2. Cliquez sur le bouton + Ajouter du contenu sur l'étape pour ouvrir la boîte à outils.
3. Sélectionnez une mise en page à colonne unique .
4. Ensuite, cliquez sur l'icône + dans la colonne pour ouvrir la boîte à outils.
5. Sélectionnez le composant Bouton pour l'ajouter à l'étape.  
   Figure 2. Ajouter un bouton  
   Remarque :  
   Lorsque vous avez sélectionné le composant, le volet Configuration de page comprend des paramètres prédéfinis que vous pouvez utiliser pour configurer automatiquement les composants sur les pages compatibles. Pour les besoins de cet exercice, cependant, vous configurerez le composant manuellement. Pour plus d'informations sur les paramètres prédéfinis, reportez-vous à la section [Personnaliser les Générateur d'IU pages à l'aide de composants](https://servicenow-prod.fluidtopics.net/8tYb7jRqzKxCUrT7qBbj1w "Découvrez ce qu’est un composant dans Générateur d'IU. Découvrez également comment les composants fonctionnent dans le générateur d’IU.").
6. Dans le volet Configuration de page, sélectionnez Configurer le composant manuellement.
7. Dans le volet Contenu de la page, sélectionnez le bouton 1 et, dans le volet Configuration, remplacez le libellé du bouton par Modal Ouvrir.
8. Sélectionnez Enregistrer.
9. Dans le volet Contenu de la page, cliquez sur l'icône plus en regard de Modaux et sélectionnez un modal d'alerte .  
   Figure 3. Fenêtre modale Ajouter une alerte
10. Sélectionnez Enregistrer.
11. Dans le volet Contenu de la page, sélectionnez le bouton 1 et, dans le volet Configuration, sélectionnez l'onglet Événements .
12. Sélectionnez + Ajouter un gestionnaire d'événements et, sous Gestionnaires d'événements hérités, sélectionnez Ouvrir ou fermer la boîte de dialogue modale.  
    Figure 4. Afficher/masquer la configuration du modal
13. Activez la boîte de dialogue Ouvrir le modal , puis sélectionnez Alerte 1 dans le champ Modal , puis sélectionnez Ajouter.
14. Sélectionnez Enregistrer.
15. Sélectionnez Aperçu.
16. Lorsque l'aperçu s'ouvre, sélectionnez Ouvrir le modal.  
    Le modal que vous avez défini s'ouvre.Figure 5. Ouvrir le modal avec le bouton
17. Sélectionnez Got it (Compris) dans le modal, puis sélectionnez le bouton Retour du navigateur pour revenir à l'écran principal de l'expérience.

Que faire ensuite
-----------------

Sélectionnez le lien Rubrique suivante pour apprendre à créer une page à l'aide d'un modèle.