Marca de Diálogo HTML

O objetivo desta postagem é explorar a caixa de diálogo Tag para que possa ser útil para você.

A tag <dialog> em HTML é usada para criar uma caixa de diálogo ou janela modal em uma página da web. Uma caixa de diálogo é uma janela pop-up que aparece na parte superior do conteúdo da página e normalmente é usada para exibir informações adicionais ou para solicitar entrada do usuário.

Veja como usar o elemento <dialog> :

Example:

1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<body>
<dialog open> This is an open dialog window in the web browser </dialog>.
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está um exemplo da tag dailog com CSS e JavaScript:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
<title>Dialog Mr Examples</title>
<style>
/* Style for the dialog */
dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
}
/* Style for the button */
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="open-button">Open the Dialog Box</button>
<dialog id="my-dialog" open>
<h2>Dialog Title</h2>
<p>This is a sample dialog box.</p>
<button id="close-button" onclick="closeDialog()">Close</button>
</dialog>
<script>
var openButton = document.getElementById("open-button");
var closeButton = document.getElementById("close-button");
var dialog = document.getElementById("my-dialog");
openButton.onclick = function() {
dialog.show();
};
closeButton.onclick = function() {
dialog.close();
};
</script>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca de diálogo HTML:

Usos e Definição

Tag dialog <dialog> representa uma caixa de diálogo ou subjanela .

Este elemento simplifica a criação de caixas de diálogo pop-up e modais usando o elemento <dialog> .

Compatibilidade do navegador

Os números na tabela indicam qual navegador suporta o elemento primeiro.

Elemento
<diálogo>	37,0	79,0	53,0*	Não suportado	24,0

Observação: não está habilitado por padrão, mas você pode ativá-lo em about:config (dom.dialog_element.enabled).

Atributos

Atributo	Valor	Visão geral
abrir	abrir	Declara que o elemento dialog está aberto e que pode interagir com o usuário.

Atributos do Evento

Da mesma forma, a caixa de diálogo Tag HTML <dialog> é compatível com os Atributos do evento .

Atributos Globais

A caixa de diálogo Tag <dialog> também aceita atributos globais de HTML .

Benefícios da Tag de Diálogo HTML

A tag <dialog> em HTML tem vários benefícios que a tornam uma ferramenta útil para desenvolvedores e designers da Web. Aqui estão alguns dos benefícios de usar a tag de diálogo:

A tag <dialog> fornece uma maneira de melhorar a experiência do usuário de uma página da Web, permitindo que os desenvolvedores exibam informações adicionais ou solicitem a entrada do usuário de uma maneira visualmente distinta do restante do conteúdo da página. Isso pode tornar mais fácil para os usuários entenderem quais ações precisam realizar em uma página da web.
Ao usar a tag <dialog> , os desenvolvedores da Web podem melhorar a acessibilidade de seu conteúdo para usuários com deficiências. As caixas de diálogo podem ser usadas para fornecer contexto ou instruções adicionais para determinados elementos da página ou para solicitar entrada do usuário de uma forma mais clara e acessível do que outros métodos.
A tag <dialog> pode ser usada para organizar o código agrupando conteúdo ou funcionalidade relacionada. Isso pode tornar mais fácil para os desenvolvedores gerenciar e manter seu código ao longo do tempo, especialmente para aplicativos da web mais complexos.
A tag <dialog> pode ser personalizada com CSS para criar caixas de diálogo exclusivas e visualmente atraentes que se ajustam ao estilo de um site ou aplicativo. Os desenvolvedores podem usar diferentes cores, fontes e outros elementos de estilo para criar caixas de diálogo mais atraentes e memoráveis para os usuários.

Se este artigo foi informativo o suficiente para atender aos seus desejos educacionais, compartilhe-o também com seus amigos clicando nos links abaixo.

Nós valorizamos o seu feedback.

Marca de Diálogo HTML

Example:

Example:

Usos e Definição

Compatibilidade do navegador

Atributos

Atributos do Evento

Atributos Globais

Benefícios da Tag de Diálogo HTML

Sentindo entediado?