---
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 modais em Construtor de IU

# Criar modais em Construtor de IU {#ariaid-title1}

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

Use modais em Construtor de IU com componentes para fornecer alertas ou chamadas para ação para um usuário. Construtor de IU vem com modais para economizar tempo e esforço.

## O que são modais {#Modals-overview__section_prj_tdc_1zb}

Modais, também conhecidos como caixas de diálogo, são janelas que se sobrepõem a outra janela de conteúdo. Os modais assumem o controle da experiência do usuário. Os usuários não podem interagir com a janela sobreposta até que o modal seja fechado. Os modais podem conter diferentes tipos de conteúdo, como:

* Texto estático
* Texto dinâmico
* Formulários
* Imagens
* Botões
{#Modals-overview__ul_dwp_vdc_1zb}

Construtor de IU tem modais pré-configurados disponíveis. Você pode adicionar um modal ao seu componente. Em seguida, configure o conteúdo do modal e como ele é exibido na tela. Adicione um manipulador de eventos ao modal para executar uma ação quando um usuário a selecionar. A ação pode alertar um usuário sobre algo ou solicitar que um usuário confirme uma ação. Um modal é uma maneira de garantir que um usuário saiba o que está acontecendo. Por exemplo, um modal pode solicitar que um usuário confirme uma seleção antes de continuar qualquer ação que esteja executando na página principal.

## Anatomia modal {#Modals-overview__section_ezg_pfc_1zb}

Os modais em Construtor de IU podem ter:

* Cabeçalho modal
* Conteúdo modal
* Botão Fechar caixa de diálogo (nenhuma ação realizada pelo modal)
* Pelo menos um botão modal (a ação pode ser realizada pelo modal)
{#Modals-overview__ul_tcy_qfc_1zb}

## Tipos de modais {#Modals-overview__section_ezr_vvn_wnb}

Diferentes tipos de modais estão disponíveis em Construtor de IU, conforme mostrado na tabela a seguir.
{#Modals-overview__table_bt3_t4h_wnb__entry__2}

| Tipo de modal | Descrição |
|-|-|
| Alerta | Um modal de alerta fornece informações relacionadas à ação do componente. Por exemplo, quando um usuário pressiona um botão de exclusão, você pode ter um pop-up de alerta que permite que o usuário saiba que não pode desfazer uma ação de exclusão. |
| Confirmar | Um modal Confirmar solicita que um usuário confirme a ação do componente. Por exemplo, quando um usuário pressiona um botão de exclusão, ele precisa confirmar a exclusão de dados. Você pode escolher as opções de confirmação nos campos de rótulo do botão primário e secundário, como Sim/Cancelar. |
| Confirmar e destruir | Um modal Confirmar e destruir é mais diretivo, geralmente relacionado à exclusão ou apagamento de conteúdo. Ele permite que o usuário saiba a seriedade de uma ação e pergunta se ele deseja prosseguir com a ação. |
| Personalizado | Os modais personalizados abordam cenários que não são tratados usando os modais padrão. Os modais personalizados podem ser considerados como um componente de contêiner em um modal. Você pode adicionar um layout personalizado, componentes, eventos e recursos de dados da mesma forma que faz em uma página. O modal personalizado usa layouts para permitir que você projete totalmente as informações desejadas no modal. Os layouts também decidem onde as informações ficam na tela do modal. Você pode usar o estilo CSS (Folhas de estilos em cascata) para mudar a aparência visual do modal. |
| iframe | Use o iFrame para trazer conteúdo para o seu modal a partir do conteúdo do iFrame existente de uma URL e dados. |
| Janela de visualização modal | Passe conteúdo dinamicamente para o modal da janela de visualização por meio de uma vinculação de evento usando um client script. |
[ ]

{#Modals-overview__table_bt3_t4h_wnb}

## Manipuladores de eventos e modais {#Modals-overview__section_n4p_dvl_xnb}

Exponha eventos a modais para lidar com eventos de call-to-action. Por exemplo, uma ação primária, uma ação secundária e assim por diante. Você configura os dados adicionando um manipulador de eventos e invocando um recurso de dados. É tão simples quanto adicionar um novo manipulador de eventos para o componente que tem um modal. Ou você pode adicionar um manipulador de eventos ao próprio modal. Você seleciona o evento que deseja associar ao componente ou modal e o adiciona. Consulte [Adicionar modal ao componente](https://servicenow-prod.fluidtopics.net/6c1LSU4dC0NblPuJG358Cw "Saiba como adicionar um modal em Construtor de IU. Um modal é uma janela que aparece quando você clica em um componente. Por exemplo, um modal pode ser exibido quando um componente do botão de exclusão é clicado, solicitando que o usuário confirme a exclusão de um registro.") para obter instruções detalhadas.
* **[Adicionar modal ao componente](https://servicenow-prod.fluidtopics.net/6c1LSU4dC0NblPuJG358Cw)**   
  Saiba como adicionar um modal em Construtor de IU. Um modal é uma janela que aparece quando você clica em um componente. Por exemplo, um modal pode ser exibido quando um componente do botão de exclusão é clicado, solicitando que o usuário confirme a exclusão de um registro.