Criando janelas de diálogo HTML5 nativas

A janela de diálogo é um dos elementos mais usados ​​no design da interface do usuário de um site. Ele é usado para vários propósitos, incluindo exibir notificações, carregar um formulário de inscrição, alertar sobre erros/avisos e chamar a atenção do visitante para informações vitais. Quando as janelas de diálogo são projetadas de forma eficaz e usadas corretamente, elas podem facilitar a tarefa do usuário.

Anteriormente, a criação de uma janela de diálogo exigia que você usasse um plug-in jQuery como Pop Easy, jQuery UI Dialog ou Twitter Bootstrap Modal. Mas agora com a introdução do novo elemento <dialog> do HTML5, ficou muito mais fácil para os desenvolvedores criarem diálogos pop-up e modais em uma página da web.

Inicialmente, a tag <dialog> entrou na especificação HTML5 como uma ótima solução para marcar conversas, mas foi retirada da especificação HTML5 em 2009. No entanto, está de volta em uma nova forma.

Neste post, mostrarei o elemento <dialog> e mostrarei como você pode aproveitá-lo ao máximo. Vamos começar!

Se você quiser ver o elemento <dialog> em ação ou brincar com o código, veja a demonstração ao vivo aqui.

Suporte do navegador para o elemento <dialog>

Infelizmente, o suporte do navegador para <dialog> é limitado por enquanto. Atualmente, o elemento é compatível apenas com o Safari 6.0 e o Chrome Canary. Embora o Chrome Canary seja totalmente compatível com a tag, você deve habilitar um sinalizador para usá-la. Vá para chrome://flags e ative o sinalizador “Ativar recursos experimentais da plataforma da Web” .

Depois de habilitar o sinalizador, você deve reiniciar o navegador para que as alterações entrem em vigor.

A interface HTMLDialogElement

A interface HTMLDialogElement , que está incluída nas especificações HTML para o elemento <dialog> , possui várias propriedades e métodos que você pode usar para fazer com que seus diálogos apareçam e desapareçam. Eles são os seguintes:

Métodos:

A interface HTMLDialogElement tem três métodos para abrir e fechar diálogos.

• show() : Este método é usado para mostrar uma caixa de diálogo. Os usuários ainda podem acessar outros conteúdos do documento HTML desde que uma caixa de diálogo esteja aberta.
• showModal() : Usado para iniciar um “diálogo modal” , que impede um usuário de acessar qualquer coisa exceto a janela de diálogo em uma página da web.
• close() : Usado para fechar uma caixa de diálogo. Você pode passar returnValue como um parâmetro opcional que atualizará a propriedade returnValue .

Propriedades:

Há duas propriedades incluídas na interface HTMLDialogElement .

• returnValue : Recupera o parâmetro que foi opcionalmente passado para close() .
• open : Esta propriedade é um valor booleano. Se true , a caixa de diálogo ficará visível para o usuário. Caso contrário, ficará oculto.

Eventos:

Quando uma caixa de diálogo é fechada, um evento close será acionado.

 dialog.addEventListener('fechar', function() {
Outro código irá aqui…
});

Além desses métodos e propriedades principais, o elemento <dialog> também suporta:

• form[method="dialog"] : Usado para integrar um formulário com um <dialog> . Válido apenas dentro de uma caixa de diálogo.
• autofocus attribute : Usado para dar foco a um controle de formulário dentro de uma caixa de diálogo.
• cancel event : Um evento cancel é acionado quando uma caixa de diálogo modal é fechada via “Esc”

Agora, depois de entender o básico do elemento <dialog> , vamos ser práticos com alguns exemplos.

Criando uma caixa de diálogo

Em primeiro lugar, mostrarei como criar uma caixa de diálogo simples. O código abaixo define um elemento <dialog> simples com algum conteúdo, um botão fechar para ocultar a caixa de diálogo e um botão show para iniciar a caixa de diálogo.

Bem-vindo ao Junction Responsivo!
Faça com que seu site existente seja responsivo
Saída

Mostrar caixa de diálogo

Ao testar o código acima em seu navegador, você não verá nada, exceto o botão “Mostrar caixa de diálogo” sem nenhuma funcionalidade, conforme mostrado na captura de tela abaixo:

Para abrir e fechar o elemento <dialog> , você precisa usar o JavaScript .show() e .close() .

 (função(){  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog.show();  
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

Agora, se você clicar no botão “Mostrar caixa de diálogo” , poderá ver a janela de diálogo no navegador. Clicar em “Sair” fechará a janela de diálogo. Aqui está a captura de tela:

Adicionando estilo à caixa de diálogo

Você pode adicionar estilos CSS à sua caixa de diálogo da mesma forma que faria com qualquer outro elemento. Por padrão, a janela de diálogo será exibida horizontalmente centralizada enquanto sobrepõe outros elementos. Se você estiver confortável com a posição e aparência padrão, nenhum CSS adicional será necessário. Caso contrário, você pode adicionar seu próprio CSS para ajustar e projetar a janela de diálogo ao seu gosto, como fiz abaixo:

 diálogo {
topo: 28%;
largura: 400px;  
borda: 1px sólido rgba(0, 0, 0, 0,3);
raio da borda: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
borda superior: sólido de 5px #eb9816;
}
botão{
exibição: bloco em linha;
raio da borda: 3px;
borda: nenhuma;
tamanho da fonte: 0.9rem;
preenchimento: 0,4rem 0,8em;
fundo: #eb9816;
borda inferior: 1px sólido #f1b75c;
cor branca;
intensidade da fonte: Negrito;
margem: 0 0,25rem;
alinhamento de texto: centro;
}
botão: passar o mouse, botão: foco {
opacidade: 0,92;
cursor: ponteiro;
}

Criando uma caixa de diálogo modal

Se você deseja impedir que seus usuários acessem o conteúdo do seu HTML, você pode usar as janelas de diálogo modal. À medida que a janela de diálogo modal fica acinzentada, todas as outras coisas, exceto a caixa de diálogo, serão exibidas, os usuários não poderão selecionar o texto esmaecido ou clicar para selecionar botões enquanto a janela de diálogo estiver aberta.

A criação de modais é semelhante à criação de diálogos, com a única diferença de usar .showModal() em vez de .show() . Não há necessidade de fazer alterações no código HTML.

(função(){  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
diálogo. showModal(); 
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

Enquanto as caixas de diálogo padrão são exibidas centralizadas horizontalmente, as caixas de diálogo modais são exibidas verticalmente e também horizontalmente centralizadas na viewport. Além disso, você pode fechar uma caixa de diálogo modal pressionando a tecla “Escape” .

Adicionando Cor de Fundo da Caixa de Diálogo Modal

O elemento <dialog> apresenta um pseudoelemento chamado "::backdrop" , que funciona apenas com diálogos modais. Usando este elemento, você pode escurecer a página principal para comunicar aos usuários que ela não está acessível. Você pode posicionar e estilizar um pano de fundo aproveitando as propriedades padrão do CSS:

 diálogo::pano de fundo{
posição: fixa;
topo: 0;
esquerda: 0;
direita: 0;
inferior: 0;
cor de fundo: rgba(0, 0, 0, 0,7);
}

Implementando <dialog> com um formulário

Um formulário pode ser integrado a um elemento <dialog> usando form method="dialog" . Após o envio do formulário, a janela de diálogo será fechada e retornará o valor do botão de envio por meio da propriedade dialog.returnValue .

Aqui está o código HTML para a caixa de diálogo do formulário:

Você concorda com os termos de uso?
Digite seu texto aqui!

sim
Não


Abrir caixa de diálogo de formulário

Use o seguinte JavaScript para a caixa de diálogo do formulário.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = function() {
formDialog.close(valor);
};
document.getElementById('formDialog').addEventListener('close', function() {
alert(formDialog.returnValue);
});

Nota : Para melhor compreensão, estou usando formDialog no lugar de Dialog na minha demonstração.

Se você quiser ver o elemento <dialog> em ação ou brincar com o código, veja a demonstração ao vivo aqui.

Conclusão

Com a reencarnação do elemento <dialog> , ficou muito mais fácil para os desenvolvedores criarem diálogos sem usar um plugin jQuery. Embora o Chrome Canary e o Safari 6.0 interpretem o elemento <dialog> corretamente, há um polyfill disponível para garantir que outros navegadores ofereçam suporte ao elemento.

Se você quiser saber mais sobre outras propriedades do HTML5, você pode querer conferir Getting to Gris with the HTML5 File API, ou você pode gostar de aprender sobre o atributo do menu de contexto HTML5.