Criar um botão que abre um modal

Depois de criar sua experiência de demonstração e adicionar uma página em branco, você pode editar a variante de página conforme necessário. Para esta demonstração, você pode criar um botão e um modal e configurar o botão para abrir o modal.

Antes de Iniciar

Função necessária: ui_builder_admin

Procedimento

1. Abra a página do Construtor de IU para sua experiência de demonstração.

   Figura 1. Construtor de IU editor visual

   

2. Clique no botão + Adicionar conteúdo na fase para abrir a caixa de ferramentas.
3. Selecione um layout de coluna única.
4. Em seguida, clique no ícone + na coluna para abrir a caixa de ferramentas.
5. Selecione o componente Botão para adicioná-lo à fase.

   Figura 2. Adicionar um botão

   

   Nota:

   Quando você seleciona o componente, o painel de configuração de página inclui algumas predefinições que você pode usar para configurar automaticamente os componentes em páginas compatíveis. Para este exercício, no entanto, você configurará o componente manualmente. Para obter mais informações sobre predefinições, consulte Personalizar Construtor de IU páginas usando componentes.
6. No painel Configuração de página, selecione Configurar o componente manualmente.
7. No painel Conteúdo da página, selecione Botão 1 e, no painel Configuração, altere o rótulo do botão para Abrir modal.
8. Selecione Salvar.
9. No painel Conteúdo da página, clique no ícone de adição ao lado de Modais e selecione um modal de alerta.

   Figura 3. Adicionar um modal de alerta

   

10. Selecione Salvar.
11. No painel Conteúdo da página, selecione o Botão 1 e, no painel Configuração, selecione a guia Eventos.
12. Selecione + Adicionar manipulador de eventos e, em Manipuladores de eventos herdados, selecione Abrir ou fechar caixa de diálogo modal.

    Figura 4. Mostrar/ocultar configuração modal

    

13. Ative a caixa de diálogo Abrir modal, selecione Alerta 1 no campo Modal e selecione Adicionar.
14. Selecione Salvar.
15. Selecionar Exibição.
16. Quando a visualização for aberta, selecione Abrir modal.
    O modal que você definiu é aberto.

    Figura 5. Abrir modal com botão

    

17. Selecione Entendi no modal e selecione o botão Voltar do navegador para retornar à tela principal da experiência.

O que Fazer Depois

Selecione o link do próximo tópico para saber como criar uma página usando um modelo.