Crie um botão que abra 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 Construtor de IU para sua experiência de demonstração.

   Figura 1. Construtor de IU editor visual

   

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

   Figura 2. Adicione um botão

   

   Nota:

   Quando você tiver selecionado o componente, o painel Configuração de página incluirá algumas predefinições que você pode usar para configurar automaticamente componentes em páginas compatíveis. No entanto, para este exercício, você configurará o componente manualmente. Para obter mais informações sobre predefinições, consulte Personalize Construtor de IUpáginas que usam componentes.
6. Selecione Adicionar.
7. No painel Configuração de página, selecione Configure o componente manualmente .
8. No painel Conteúdo da página, selecione Botão 1 E, no painel Configuração, mude o rótulo do botão para Abrir modal .
9. Selecione Save (Salvar).
10. No painel Conteúdo da página, clique no ícone de mais ao lado de Modais e selecione um Alerta modal.

    Figura 3. Adicione um modal de Alerta

    

11. Selecione Save (Salvar).
12. No painel Conteúdo da página, selecione Botão 1 E, no painel Configuração, selecione Eventos .
13. 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

    

14. Ative o. Abrir caixa de diálogo modal e, selecione Alerta 1 em Modal e selecione Adicionar .
15. Selecione Save (Salvar).
16. Selecionar Exibição.
17. Quando a visualização for aberta, selecione Abrir modal .
    O modal definido é aberto.

    Figura 5. Abrir modal com botão

    

18. Selecione Entendi no modal e, em seguida, selecione o botão voltar do navegador para retornar à tela principal da experiência.

O que Fazer Depois

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