MODAL COM JAVASCRIPT - PROJETO DE HTML, CSS E JAVASCRIPT
Вставка
- Опубліковано 25 лип 2022
- Aprenda a criar um modal com #JavaScript puro, utilizando #HTML para estruturação da página e #CSS para estilização.
Modal é um elemento utilizado em muitos sites, geralmente para mostrar informações que não estão na página.
Aprender o conceito de como construir um modal é fundamental para qualquer desenvolvedor.
🔥 Semana do Banco de Dados: materiais.horadecodar.com.br/...
📁 Repositório: github.com/matheusbattisti/ja...
🔴 Instagram: @horadecodar 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord - Наука та технологія
⭐Conheça a Formação Front-end (+50 de horas de conteúdo, +20 de projetos) para você se tornar um dev front-end: www.udemy.com/course/formacao-front-end-html-css-javascript-react-e/?couponCode=LANCOUFE
Que complicação é so colocar display none e opacidade zero, depois display block, inline sei lá e opacidade 100%
Fala Matheus, muito obrigado por este vídeo incrível! Adorei este projeto. Informação útil de forma clara e objetiva! Valeu
Matheus, thank you for your wonderful video with simple and excellent explanation at the same time! It was very useful!
Show!! Excelente aula professor, muito obrigado!!
Perfeito! Já sou aluno e muito fam! 👏
Didática é sencacional! Vale muito a pena os cursos dele, recomendo muito!
TOP das galáxias, ajudou muito de forma simples e funcional!
Obrigado pela aula e pelo vídeo! DEZZZZZ! Bem explicado!
És um monstro no CSS. Ótima aula!
S E N S A C I O N A L ! TUDO Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !
Muito bom!! Comecei agora a acompanhar teus vídeos. Já me ajudou em bastante coisa. Você teria algum conteúdo que explique com mais detalhes essa estrutura de forEach que você utilizou? Parabens e obrigado pelo conteúdo
Vídeo excelente professor, valeu!
Meu mais novo DUESSS, excelente explicação
Top demais Matheus, vlw por mais esse video de qualidade 👏🏼👏🏼
obrigado Bruno, abraço!
Parabéns pelo conteúdo irmão!
Único b.o que deu aqui comigo foi que importando o script.js no head não deu certo, fiquei horas tentando encontrar onde era o erro, até que pesquisando eu vi que importando o script.js no body deu bom. Mas independente, muito obrigado por postar esse conteúdo maravilhoso, salvou minha vida
Muito obrigado, também tive esse problema e não sabia o que tinha dado errado, fiz o que vocé falou e funcionou.
Poh cara brigada mesmo foi o único que consegui ver e entender ;)
Obrigado, melhor professor do youtube
Muito bem detalhado! Top!
Otima a aula! Parabens pelo conteudo. Matheus poderia nos trazer uma pequena aula com o ?!
muito bom , obrigado pela aula.
Ajudou demais, obrigado e parabéns
Como sempre, uma excelente aula! Parabéns, Matheus!
obrigado Daniel!!
Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !
valeu Moa!
Nem vi ja soltei o like!! Professor fera demais!!
obrigado Mateus!
Muito bom Matheus! Simples mas muito prático. Parabéns
valeu Leandro, tamo junto! =D
Muito massa mano, estava precisando
Valeu broo 🤗👌🕶
valeu Alan!
Muito bom o conteúdo, poderia vir com mais vídeos assim, ajuda muito quem está entrando em uma vaga para ter ideias de algumas possíveis soluções
com certeza Jonathan, tento trazer pelo menos um projeto por semana =D
O office aí tá ficando show, aí sim!!!!
Valew professor! Abraço!
haha valeu Vinicius, arranjei um tempinho para organizar as coisas =DD
Ótimo conteúdo grande Matheus 👍 parabéns
mto obrigado Fabio!
Show de bola a construção!!!
valeu Anselmo!
Show de bola... excelente projeto... inscrito na semana SQL tbm.
opa aí sim Getúlio, te espero lá!
🔥 Já se inscreveu para a Semana do Banco de Dados? Corre lá: materiais.horadecodar.com.br/semana-do-banco-de-dados
A função "toggleModal" precisa ser passada sem parênteses pro "addEventListener", senão ela é executada antes mesmo da ação de clique, aqui deu esse problema, não sei como no vídeo não deu.
[openModalButton, closeModalButton, fade].forEach((element) => {
element.addEventListener("click", toggleModal);
});
Obrigado por compartilhar seu conhecimento
de nada Andre, tamo junto!
Professor você é demais
Tava precisando muito!!!
show Charles!
você já sabe! mas mesmo assim vou dizer, você é fera!
Muito bom, obrigada
Top demais professor 👏👏
valeuu Lima!
Muito bom! 👏👏👏
valeu Carmen!!
eu amo esse cara !
haha, tamo junto!
Obrigado pela aula
muito bom!
quanta dica bacana, +1 inscrito!
Valeu Natan!
valeu, ajudou muito
Rapaz, vou comprar algum curso teu pq isso me salvou no trampo de uma maneira...
Show!!
valeuu!
Bem legal cara
Muito top, a explicação!!!
#Inscrito
obrigado Vinicius, hj tem vídeo novo =D
Excelente aula! Vlwww
de nada Victor!
Oi, Matheus. Beleza? Você poderia fazer um exemplo de modal com javascript puro que tenha campos que podem ser alterados/atualizados?
Muito bom
@Matheus Battisti, tudo bem? gostei do vídeo!!! teria como fazer uma modal com tabela?
Excelente conteúdo, como sempre, mestre Matheus. Como sugestão, você pode fazer uma videoaula sobre a criação de uma splash Screen (tela de carregamento)? Agradeço. Abraço!
opa Daniel, vou anotar pra trazer, obrigado pela sugestao!
@@MatheusBattisti Ficarei no aguardo. Já me inscrevi na Semana do Banco de Dados
boa tarde!
gosto muito dos seus videos!
poderia fazer um video de cookie, para colocar no site, com aviso que o site utiliza cookie
Excelente! Só queria saber como fazer para abrir esse modal de forma automática ao acessar a página, sem necessidade de clicar no botão!
Excelente! Manja muito de css haha
grande Neder, obrigado! =))
Excelente.
valeu Jeferson!
É muito comum na utilização de celulares o usuário pressionar o botão "Voltar" (ou gesto) do celular para sair de modais. É interessante fechá-lo ao invés de sair totalmente da página. Como resolver isso?
Conteúdo muito bom, depois que a gente aprende a fazer as coisas "na mão", consegue perceber de fato os problemas que uma lib resolve e até damos mais valor as elas. Digo isso me baseando no react-modal que depois que eu descobri, uso sempre posso 😅
verdade Lucas, aprendendo a fazer na mão com JS, utilizar algo assim em React fica bem mais simples =)
Nice tutorialiii
valeu Marci!
boa noite, eu estou iniciando no javascript, sei muito coisa, mais da programação normail, que no caso seria o mais simples, eu tenho um duvida, para que serve o sinal =>, e quando eu uso?
Manja muito
Os cursos dele na Udemy são top tbm
valeu brother!!
top demais...
valeu Leandro, temos quase o mesmo sobrenome, o meu é Budkewicz xD
@@MatheusBattisti kkkk
Putz o seu é ainda mais difícil kkkkk, legal,
@MatheusBattisti
Como ficaria colocando varios Pop up um do lado do outro?
Meu deu algum problema no JS, pq o meu modal é pra abrir quando aperta em uma opção no nav bar
Mais professor o modal também abre quando eu clico em qualquer canto da tela, como resolvo isso?
TOP
valeu João!
@@MatheusBattisti Vou participar do evento, e sou 100° inscrito no telegram :D vlw!
O meu Modal deu erro na execução só consigo usar o código em um único lugar, quando eu uso em outras partes do código não consigo abrir o modal
como posso add essa modal em mais de um botão ? pois tentei colocar em 4 mas não pega, só pega no primeiro
usei a mesma função de open modal em dois botoes diferentes, oq pode ser ?
boa noite, tentei fazer . mais na hora de renderizar nao esta igual
Amigão como faz pra deixar com scrolling?
Já tenho feito
Eu tô aqui só para manter o engajamento kkkkkkkk
Fala sobre style-components se tiver tempo
Boa Isaac, vou trazer sim 😀
@@MatheusBattisti aí eu vi vantagem kkkkkkk
Top de mais.
Consigo aplicar a mesma ideia com React?
valeu Anderson, e com certeza, com React vc utilizaria o useState para gerenciar o status do modal, fica simples tb
Opa Matheus, existe um jeito muito mais simples e semântico para se fazer modal, que é utilizando a tag dialog do HTML.
opa Leandro, é uma outra alternativa tb =D
Precisei fazer modal essa semana. kkkkk
hahhaa falei que era comum! xD
Esse vai ser meu Asmr de hj. Zoeira 🤣
hhahahhaha
Muito legal Matheus, agora fiquei com uma dúvida, Por exemplo quero fazer a modal mais quero que ela feche somente quando clicar no botão fechar por exemplo tem como fazer isso ?
[openModalButton, closeModalButton].forEach(el => {
el.addEventListener("click", () => toggleModal())
});
Só tirar o elemento fade das escuta de eventos, que ai vai sobrar somente duas alternativas para serem clicadas e chamar a função toggle, ou o botão de abrir ou o botão de fehcar
Nessas horas o Boostrap salva heheh
Utilizei o style.display no java script.
Tem diferença entre usar style e o classList?
mais ou menos João, no classList utilizamos as classes, aí o código acaba ficando mais consistente, no style precisamos lidar diretamente com as regras de CSS
Quando eu declarei o array da forma que fez no vídeo não funcionou não. Deu um erro alertando que o array foi declarado como undefined , somente essa parte achei estranho.
bom, aí precisaria ver o código para analisar, mas espero que tenha conseguido =)
o meu aconteceu isso também.
Olá Matheus, e possível aprender Node.js sem saber Java-Script?
é como cozinhar no fogão a gás sem o gás xD
conseguir implementar quase tudo, menos as últimas transições do modal e fade que faz as animações, não sei por qual motivo não funciona
tambem nao conseguir aqui no navegador.
First!
booora!
quero ver o modal saindo hahah
O melhor jeito de usar o modal é assim com div ou com dialog?
Dialog é melhor, pois já adota várias práticas de acessibilidade e faz parte do core do HTML moderno. Uma outra função bacana do DIALOG é que ele vai criando várias instâncias uma em cima da outra automaticamente quando você executa a função de abertura de outras modais.
Nem se compara com dialog é muito mais fácil de fazer. Essa forma fica muito mais complexa.
Esse modal tbm serve pra aba de política de privacidade? Q a pessoa tem q aceitar pra prosseguir ?
Pq vc usa unidades rem pra espaçamento ?
Eu sempre usei porcentagem pra tentar deixar responsivo, usar rem pra espaçamento é a melhor prática pra deixar responsivo?
Em 23 min de aula tua aqui, foi um blowing mind no meu cérebro !!! Gostei da didática ...
Mas desse jeito o resto da página fica inclicavel
Meu deu algum erro!!
A função "toggleModal" precisa ser passada sem parênteses pro "addEventListener", senão ela é executada antes mesmo da ação de clique, aqui deu esse problema, não sei como no vídeo não deu.
[openModalButton, closeModalButton, fade].forEach((element) => {
element.addEventListener("click", toggleModal);
});
Bom dia. Vídeo bem legal, mas notei algo errado na programação... Vc permitiu o clique em qualquer área, menos o botão "Fechar", para ocultar o modal... Assim quebra um dos paradigmas de programação quanto à modelagem visual (reflita nisso). Assim deixa todos os programadores com um nível de aprendizado bastante complexo assim que viram o seu vídeo. Abraços cordiais.
7:19, faz o L
A função "toggleModal" precisa ser passada sem parênteses pro "addEventListener", senão ela é executada antes mesmo da ação de clique, aqui deu esse problema, não sei como no vídeo não deu.
[openModalButton, closeModalButton, fade].forEach((element) => {
element.addEventListener("click", toggleModal);
});