DEV Community

Cover image for Construindo uma modal semântica com o elemento <dialog>

Construindo uma modal semântica com o elemento <dialog>

Angela Caldas on May 17, 2023

Construir um bom e velho pop-up na sua aplicação já foi bem mais difícil! Quer aprender uma forma mais simples e, o melhor de tudo, mais acessível ...
Collapse
 
zeotoni profile image
Ezequiel Otoni

Adorei. Eu tava perdido na vida usando div kkk. Agora não mais. Arrasou Angela 👏🏻👏🏻

Collapse
 
sucodelarangela profile image
Angela Caldas

Ah, eu também saí recentemente das modais com divs, haha! Que bom que curtiu, Ezequiel, obrigada!

Collapse
 
malopestorres profile image
Marcus Torres • Edited

Que lindeza de tutorial deixo aqui meu muito obrigado ☺️

Collapse
 
sucodelarangela profile image
Angela Caldas

Muito obrigada, Marcus! 😍

Collapse
 
marcelluscaio profile image
Caio Marcellus Cabral

Artigo maravilhoso juntando o que tem de mais moderno. Menos código e melhor acessibilidade, win-win. E com uma didática impecável. Bora geral usar o o/

Collapse
 
sucodelarangela profile image
Angela Caldas

Valeu, Caioooo <3
Eu sempre tive muito pé atrás com modal por conta da acessibilidade, mas essa abordagem melhora bastante a UX.

Collapse
 
fabianoraiser profile image
Fabiano Raiser

Obrigado por trazer essa tag nova, Angela. Estava aqui quebrando a cabeça de como eu iria implementar as modais num novo projeto que estou trabalhando, agora já sei por onde seguir de uma maneira mais fácil

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

And the overall browser support is not bad, you might want to give it a look:

caniuse.com/?search=dialog

Collapse
 
filipeexercito profile image
Filipe Macedo Teixeira • Edited

Após eu colocar a tag dialog meu modal não desapareceu da página. Ficou lá me olhando e eu olhando pra ele kkkk... e agora, será que é meu navegador? Estou utilizando o Chrome. Esse comportamento de aplicar "display none" não deveria ser padrão da tag dialog?

Collapse
 
augustowhonorata profile image
Augusto Honorata

Que artigo maravilhoso, completo e muito bem detalhado. Muito obrigado pelos esclarecimentos

Collapse
 
cademeucode profile image
Cade Meu Code

Eu não fazia idéia de como era implementado um modal... O artigo está muito bem escrito, claro e objetivo. Obrigado por compartilhar!