Créer un bouton qui ouvre un modal

Une fois que vous avez créé votre expérience de démonstration et ajouté une page vide, vous pouvez modifier la variante de page selon vos besoins. Pour les besoins de cette démo, 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 du 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 de 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 :

   Une fois que 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 allez configurer 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.
6. Dans le volet Configuration de la 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 l’étiquette du bouton par Ouvrir le modal.
8. Sélectionnez Enregistrer.
9. Dans la fenêtre Page content (Contenu de la page), cliquez sur l’icône plus en regard de Modals (Modaux ) et sélectionnez un modal d’alerte .

   Figure 3. Ajouter un modal d’alerte

   

10. Sélectionnez Enregistrer.
11. Dans la fenêtre Page contents (Contenu de la page), sélectionnez le bouton 1 et, dans la fenêtre Configuration (Configuration), sélectionnez l’onglet Events (É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 modale

    

13. Activez la boîte de dialogue Ouvrir le modal , 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.
    La fenêtre modale que vous avez définie s’ouvre.

    Figure 5. Ouvrir le modal avec le bouton

    

17. Sélectionnez D’accord 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 de la rubrique suivante pour apprendre à créer une page à l’aide d’un modèle.