MODAL APENAS COM HTML - Crie um pop up completo somente com HTML e uma pitada de JS (tag dialog)
Ғылым және технология
Aprenda a como criar um modal com a tag dialog do HTML, utilizando pouco JavaScript 🔴 Curso completo de HTML e CSS: app.horadecodar.com.br/ebookp...
📘 Ebook de HTML e CSS grauito: app.horadecodar.com.br/ebookp...
Entre no nosso servidor de Discord e me siga nas redes:
🟣 Discord Hora de Codar: / discord
🔴 Instagram: / horadecodar
🔷 Telegram: t.me/horadecodar
Neste vídeo, você aprenderá como criar um modal dinâmico usando apenas a tag dialog do HTML5, com um toque de JavaScript para controle fino! Este vídeo é perfeito para desenvolvedores que desejam implementar pop-ups eficientes sem depender de bibliotecas pesadas ou frameworks complicados.
▶️ O que você vai aprender:
- Como utilizar a tag dialog do HTML5 para criar modais.
- Métodos simples de JavaScript para abrir e fechar modais.
- Dicas de acessibilidade para garantir que seu modal seja acessível a todos os usuários.
- Como personalizar o estilo do seu modal com CSS básico.
🔍 Por que assistir:
- A tag dialog é uma ferramenta subutilizada que simplifica a criação de modais.
- Aprenda a criar interfaces de usuário interativas sem frameworks externos.
- Melhore a usabilidade e a acessibilidade dos seus projetos web.
#html #html5
Пікірлер: 26
🔴 Curso completo de HTML e CSS: app.horadecodar.com.br/ebookpages/boas-praticas-html-e-css 📘 Ebook de HTML e CSS grauito: app.horadecodar.com.br/ebookpages/boas-praticas-html-e-css
Matheus, queria te agradecer pelas aulas, tanto daqui quanto da Udemy. Graças as suas aulas, eu consegui um trabalho, aliás um ótimo trabalho. Vou continuar seguindo aulas como essas e outras que virão. Abraço!
@MatheusBattisti
3 ай бұрын
shooow, mto massa mesmo, obrigado pelo comentário! =D
@DooX1556
2 ай бұрын
Pooo irmão, parabéns de verdade!!! Nem te conheço mas fiquei feliz pra carai lendo essa msg. Os cursos do Matheus são mt bons, didática boa, sem contar que os projetos são bem legais
Dica top Matheus, já fui seu aluno e continuo seguindo as dicas! Testei aqui e realmente é bem prático. Pra resolver o problema de fechar, uma outra alternativa que usei foi zerar o padding do dialog que vem como padrão em 1em e daí coloquei padding nos elementos internos.
@MatheusBattisti
2 ай бұрын
boa Ramon!
Boas dicas, muito obrigado !
Ótica dica Matheus. Parabéns! Essa tag ajuda bastante e facilita a criação do modal.
@MatheusBattisti
3 ай бұрын
valeu brother! =D
Ótima dica!
@MatheusBattisti
2 ай бұрын
valeu!! =D
Estou criando um projeto, isto vai me ajudar.
@MatheusBattisti
2 ай бұрын
opa Elson, q massa! =D
Perfeito seus video amigo, apredendo um basico, so por roby. aida em html,css,javasclipt.
@MatheusBattisti
2 ай бұрын
opa, tamo junto!!
Esse Matheus é muito fera.
@MatheusBattisti
3 ай бұрын
opa, tamo junto!
Muito legal o dialog, é uma das ferramentas nativas q mais gosto no HTML. Uma coisa q pode fazer dar certo fechar o modal usando o e.target ao invés do getBoundingClientRect seria setando a margem, borda e padding do dialog para 0 e dentro do dialog colocar uma div que terá height e width 100%, com isso cobrirá todo o dialog (com exceção do backdrop) e todo clique dento do dialog por consequência o e.target será a div (ou seus filhos).
@yuri4dev
8 күн бұрын
isso faria fechar o modal clicando do lado de fora?
Boa noite, queria saber o porquê o (e) esta entre parênteses ?
Matheus muito bom. Qdo eu clico na parte de baixo não fecha, pode testar o seu código para ver se fecha? Pq fiz igual ao seu.
@MatheusBattisti
3 ай бұрын
Vê se foi algo errado ali nas coordenadas, não consigo testar agora hehe
@comentariosreview
3 ай бұрын
Colocou o botão com o id certo? Na hora de chamar ele em uma var ou constante verificou se está correto? Tenta fazer alguma alteração com ele pelo JS pra ver se é só esse de fechar que não funciona.
Matheus, é possível disponibilizar o código deste vídeo, ajuda muito!
@MatheusBattisti
3 ай бұрын
cara, acabei não criando repo, vou anotar aqui para subir, aí ponho na descricao nos proxs dias, abraço!
@hailtonDavidLemos
3 ай бұрын
@@MatheusBattisti Obrigado!