MODAL APENAS COM HTML - Crie um pop up completo somente com HTML e uma pitada de JS (tag dialog)
Вставка
- Опубліковано 1 тра 2024
- 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 - Наука та технологія
🔴 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!
shooow, mto massa mesmo, obrigado pelo comentário! =D
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.
boa Ramon!
Estou criando um projeto, isto vai me ajudar.
opa Elson, q massa! =D
Boas dicas, muito obrigado !
Perfeito seus video amigo, apredendo um basico, so por roby. aida em html,css,javasclipt.
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).
Ótima dica!
valeu!! =D
Ótica dica Matheus. Parabéns! Essa tag ajuda bastante e facilita a criação do modal.
valeu brother! =D
Esse Matheus é muito fera.
opa, tamo junto!
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.
Vê se foi algo errado ali nas coordenadas, não consigo testar agora hehe
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!
cara, acabei não criando repo, vou anotar aqui para subir, aí ponho na descricao nos proxs dias, abraço!
@@MatheusBattisti Obrigado!