---
sourceDocument: Criar ou modificar aplicações do Xanadu
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/xanadu/application-development

 Release :

    - xanadu

ft:locale :

    - pt-BR

ft:publication_title :

    - Criar ou modificar aplicações do Xanadu

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

# Criar um botão que abre um modal

# Criar um botão que abre um modal {#ariaid-title1}

* Versão de lançamento: Xanadu
* 
* Atualizado 1 de ago. de 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 min. de leitura

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](https://servicenow-prod.fluidtopics.net/LMCt0RiXG4slkbM3HcNAXA "Saiba o que é um componente em Construtor de IU. Veja também como os componentes funcionam no Construtor de IU.").
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.