Тёмный

MODAL APENAS COM HTML - Crie um pop up completo somente com HTML e uma pitada de JS (tag dialog) 

Matheus Battisti - Hora de Codar
Подписаться 142 тыс.
Просмотров 3,2 тыс.
50% 1

Aprenda a como criar um modal com a tag dialog do HTML, utilizando pouco JavaScript 🔴 Curso completo de HTML e CSS: app.horadecoda...
📘 Ebook de HTML e CSS grauito: app.horadecoda...
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 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 26   
@MatheusBattisti
@MatheusBattisti 4 месяца назад
🔴 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
@junnyhor
@junnyhor 4 месяца назад
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
@MatheusBattisti 4 месяца назад
shooow, mto massa mesmo, obrigado pelo comentário! =D
@DooX1556
@DooX1556 4 месяца назад
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
@ramonb8085
@ramonb8085 4 месяца назад
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
@MatheusBattisti 4 месяца назад
boa Ramon!
@eduardogomes579
@eduardogomes579 4 месяца назад
Boas dicas, muito obrigado !
@AbusarWeb
@AbusarWeb 4 месяца назад
Ótica dica Matheus. Parabéns! Essa tag ajuda bastante e facilita a criação do modal.
@MatheusBattisti
@MatheusBattisti 4 месяца назад
valeu brother! =D
@dcassis
@dcassis 4 месяца назад
Ótima dica!
@MatheusBattisti
@MatheusBattisti 4 месяца назад
valeu!! =D
@elsonsantos9968
@elsonsantos9968 4 месяца назад
Estou criando um projeto, isto vai me ajudar.
@MatheusBattisti
@MatheusBattisti 4 месяца назад
opa Elson, q massa! =D
@lindom4rs4bino89
@lindom4rs4bino89 4 месяца назад
Perfeito seus video amigo, apredendo um basico, so por roby. aida em html,css,javasclipt.
@MatheusBattisti
@MatheusBattisti 4 месяца назад
opa, tamo junto!!
@DiogoLScarmagnani
@DiogoLScarmagnani 4 месяца назад
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
@yuri4dev 2 месяца назад
isso faria fechar o modal clicando do lado de fora?
@nicolasalmeida7673
@nicolasalmeida7673 4 месяца назад
Esse Matheus é muito fera.
@MatheusBattisti
@MatheusBattisti 4 месяца назад
opa, tamo junto!
@eduardogomes579
@eduardogomes579 4 месяца назад
Boa noite, queria saber o porquê o (e) esta entre parênteses ?
@hailtonDavidLemos
@hailtonDavidLemos 4 месяца назад
Matheus, é possível disponibilizar o código deste vídeo, ajuda muito!
@MatheusBattisti
@MatheusBattisti 4 месяца назад
cara, acabei não criando repo, vou anotar aqui para subir, aí ponho na descricao nos proxs dias, abraço!
@hailtonDavidLemos
@hailtonDavidLemos 4 месяца назад
@@MatheusBattisti Obrigado!
@oxum1983
@oxum1983 4 месяца назад
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
@MatheusBattisti 4 месяца назад
Vê se foi algo errado ali nas coordenadas, não consigo testar agora hehe
@comentariosreview
@comentariosreview 4 месяца назад
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.
Далее
Китайка и Максим Крипер😂😆
00:21
Faça PopUps com JavaScript Puro ||  Prof. Gabriel
12:10
Build a Popup With JavaScript
16:55
Просмотров 369 тыс.
CSS Responsivo na Prática 💻
5:28
Просмотров 18 тыс.
Китайка и Максим Крипер😂😆
00:21