Elemento HTML Dialog

conheça o elemento html Dialog

Já pensou em utilizar um elemento HTML Dialog para adicionar uma caixa de diálogo sem javascript? Em outras palavras um pop-up totalmente acessível sem nenhum javascript.

A tag <dialog> ela ganhou a atenção quando Firefox e Chrome tiveram suporte e agora o safari já deu suporte na sua versão 134. Essa “nova” tag além do seu valor semântico também tem uma API CSS para os seus estados e elementos relacionados.

Suporte

Quando ainda morava na Irlanda em 2019 testei, essa nova tag HTML dialog, que tinha um funcionamento parecido como um pop-up, primeira coisa que olhei foi o suporte para esse componente e naquela época somente, Chrome e Firefox dava suporte.

Agora no final de outubro de 2021, webkit o motor do navegador safari anunciou o suporte ao elemento dialog nas próximas versões do safari e a partir da versão 15.4 do safari passamos a ter suporte a tag HTML dialog. Hoje junho de 2022 mais de 90% dos browsers suportam tag dialog.

Suporte a tag HTML dialog em junho de 2022

Como funciona?

Ok? Agora que já falamos sobre a tag chegou a hora de trabalhar um pouco. O uso é bem simples primeiramente a tag possui uma propriedade open para definir se o elemento está visível ou não, por exemplo:

<h2>tag dialog</h2> <dialog open> <meta charset="utf-8">Busquem o conhecimento! </dialog> <meta charset="utf-8"><dialog> Quenhê vc? </dialog>
Code language: HTML, XML (xml)

E o resultado desse código será o seguinte:

primeiro test com a tag HTML dialog

Como podemos ver apenas o primeiro dialog é exibido, por que ele possui uma propriedade open, mas caso queiramos através de um outro elemento invocar um dialog, fazemos da seguinte forma:

<dialog id="dialog"> <form method="dialog"> <p>Busquem o conhecimento!</p> <button>Obrigado</button> </form> </dialog> <button onclick="dialog.showModal()">Mensagens especiais</button>
Code language: HTML, XML (xml)

Com o novo código quando clicamos no botão, o nosso dialog será exibido graças ao método showModal(). O pop-up será exibido e quando o usuário clicar no botão obrigado ele irá fechar isso irá gerar uma confirmação no formulário no pop-up assim fechando o elemento.

Mas caso queiramos fechar o nosso elemento HTML dialog sem realizar uma ação num formulário realizamos da seguinte forma:

<dialog id="dialogv2"> <header> <button class="close-dialog-btn" onclick="this.closest('dialog').close('close')" > X </button> </header> <p>As arvores somos nozes</p> </dialog> <button onclick="dialogv2.showModal()">Mais conhecimento</button>
Code language: HTML, XML (xml)

Agora vamos estilizar o nosso elemento HTML dialog com um pouco de CSS:

dialog { font-size: 1rem; margin: auto; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); width: 100%; background: #f4f4f4; border-radius: 3px; position: relative; width: 300px; max-width: 100%; border: none; padding: 0; } dialog header { background: #cccccc; padding: 0.5em; text-align: right; border-radius: 3px 0 0 3px; } dialog p { padding: 1em; } .close-dialog-btn { border-radius: 100%; border: none; padding: 0.5em; width: 30px; height: 30px; } dialog::backdrop { backdrop-filter: blur(15px); }
Code language: CSS (css)

Além da estilização tradicional, também podemos estilizar o backdrop do nosso elemento dialog através do pseudo seletor ::backdrop no meu caso eu adicionei um blur ao meu elemento assim os itens atrás do backdrop não ficam visíveis.

Resultado da estilização com CSS

mais conteúdo relacionado

Se você gostou do conteúdo confira mais conteúdo releacionado, e também confira o artigo do web.dev sobre dialog.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.