O elemento é usado quando você deseja criar um modal ou caixa de diálogo que se sobreponha ao conteúdo principal de uma página da web.
Você pode usá-lo para exibir informações adicionais, capturar entradas do usuário ou apresentar mensagens ou alertas importantes.
elemento:
- Interações do usuário: se você precisar solicitar uma entrada ou confirmação do usuário, como enviar um formulário, excluir um registro ou confirmar uma ação, uma caixa de diálogo pode fornecer um prompt claro e focado que captura a atenção rapidamente.
- Exibição de informações: quando você tiver informações complementares que deseja apresentar sem sair da página atual, uma caixa de diálogo poderá ser usada para fornecer detalhes específicos do contexto, instruções ou conteúdo adicional.
- Mensagens de erro ou aviso: nos casos em que você precisa notificar o usuário sobre erros, avisos ou notificações importantes, uma caixa de diálogo pode chamar sua atenção e garantir que ele reconheça a mensagem antes de continuar.
- Conteúdo interativo: se você tiver conteúdo interativo como mapas, gráficos ou elementos multimídia que exijam interação ou personalização do usuário, uma caixa de diálogo poderá servir como um espaço dedicado para apresentar e interagir com esse tipo de conteúdo.
Sintaxe
1 |
|
2 |
|
3 |
|
O open
O atributo é opcional e pode indicar que a caixa de diálogo deve estar visível por padrão quando a página for carregada.
Exemplo
Aqui está um exemplo interativo de como usar o elemento:
Neste exemplo, um botão aciona a abertura da caixa de diálogo quando clicado, o que requer algum código JavaScript. A caixa de diálogo contém conteúdo e uma fechar botão que permite ao usuário fechar a caixa de diálogo.
Atributos
O tag suporta atributos globais em HTML. Os Atributos Globais são comuns a todos os elementos HTML e podem ser usados em todos eles (embora possam não ter muito efeito em alguns deles).
O elemento também suporta o
open
atributo.
-
open
: especifica que a caixa de diálogo deve ficar visível quando a página for carregada. Este atributo pode ser alterado dinamicamente usando JavaScript, como fizemos no exemplo acima, para controlar a visibilidade do diálogo.
Contente
O O elemento pode conter conteúdo HTML como texto, imagens, botões, formulários e muito mais.
Você sabia?
-
é classificada como uma “raiz seccional”, semelhante à
,