MODAL COM JAVASCRIPT - PROJETO DE HTML, CSS E JAVASCRIPT

[@MatheusBattisti]

⭐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

[@WilliamCerqueira-b1m]

Que complicação é so colocar display none e opacidade zero, depois display block, inline sei lá e opacidade 100%

[@PedroHenrique-ol7lu]

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

[@joaopedro7693]

Muito obrigado, também tive esse problema e não sabia o que tinha dado errado, fiz o que vocé falou e funcionou.

[@MatheusBattisti]

🔥 Já se inscreveu para a Semana do Banco de Dados? Corre lá: materiais.horadecodar.com.br/semana-do-banco-de-dados

[@PexuPixo]

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); });

[@leandroreis2694]

Muito bom Matheus! Simples mas muito prático. Parabéns

[@MatheusBattisti]

valeu Leandro, tamo junto! =D

[@mateusvieira6152]

Nem vi ja soltei o like!! Professor fera demais!!

[@MatheusBattisti]

obrigado Mateus!

[@mbs2488]

Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@MatheusBattisti]

valeu Moa!

[@jonathandantas2235]

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

[@MatheusBattisti]

com certeza Jonathan, tento trazer pelo menos um projeto por semana =D

[@anselmonascimento3324]

Show de bola a construção!!!

[@MatheusBattisti]

valeu Anselmo!

[@Pudimwertyy]

Excelente, era o que eu precisava!

[@diegoalvessantana1219]

Perfeito! Já sou aluno e muito fam! 👏 Didática é sencacional! Vale muito a pena os cursos dele, recomendo muito!

[@channeldel]

TOP das galáxias, ajudou muito de forma simples e funcional!

[@andredias6356]

Obrigado por compartilhar seu conhecimento

[@MatheusBattisti]

de nada Andre, tamo junto!

[@viniciusm.m.7822]

O office aí tá ficando show, aí sim!!!! Valew professor! Abraço!

[@MatheusBattisti]

haha valeu Vinicius, arranjei um tempinho para organizar as coisas =DD

[@MrDvcosta]

Como sempre, uma excelente aula! Parabéns, Matheus!

[@MatheusBattisti]

obrigado Daniel!!

[@junior7872]

Meu mais novo DUESSS, excelente explicação

[@jesusvick]

eu amo esse cara !

[@MatheusBattisti]

haha, tamo junto!

[@augustoge71]

Show de bola... excelente projeto... inscrito na semana SQL tbm.

[@MatheusBattisti]

opa aí sim Getúlio, te espero lá!

[@brunocorrea_br]

Top demais Matheus, vlw por mais esse video de qualidade 👏🏼👏🏼

[@MatheusBattisti]

obrigado Bruno, abraço!

[@fabiodasilva1054]

Ótimo conteúdo grande Matheus 👍 parabéns

[@MatheusBattisti]

mto obrigado Fabio!

[@charlesdicampos4818]

Tava precisando muito!!!

[@MatheusBattisti]

show Charles!

[@bartsilva5513]

você já sabe! mas mesmo assim vou dizer, você é fera!

[@kingars]

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!

[@alexsilva-id2kl]

Obrigado, melhor professor do youtube

[@brendatuannedafrotaaugusto2414]

Poh cara brigada mesmo foi o único que consegui ver e entender ;)

[@MrDvcosta]

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!

[@MatheusBattisti]

opa Daniel, vou anotar pra trazer, obrigado pela sugestao!

[@MrDvcosta]

@@MatheusBattisti Ficarei no aguardo. Já me inscrevi na Semana do Banco de Dados

[@mbs2488]

S E N S A C I O N A L ! TUDO Muito Bem Explicado ! ! Parabéns pelos vídeos ! ! !

[@alangabriel910]

Muito massa mano, estava precisando Valeu broo 🤗👌🕶

[@MatheusBattisti]

valeu Alan!

[@fnatans]

quanta dica bacana, +1 inscrito!

[@MatheusBattisti]

Valeu Natan!

[@pauloofranco5663]

Obrigado pela aula e pelo vídeo! DEZZZZZ! Bem explicado!

[@LeonardoBradoksOficial]

Obrigado pela aula

[@Lima-yd3cm]

Top demais professor 👏👏

[@MatheusBattisti]

valeuu Lima!

[@bryandeodato734]

Ajudou demais, obrigado e parabéns

[@tferreiraalves]

Muito bem detalhado! Top!

[@jholsas]

Fala Matheus, muito obrigado por este vídeo incrível! Adorei este projeto. Informação útil de forma clara e objetiva! Valeu

[@matealves]

Show!! Excelente aula professor, muito obrigado!!

[@tatocalinda]

Show!!

[@MatheusBattisti]

valeuu!

[@werner.thiede]

És um monstro no CSS. Ótima aula!

[@gamervinnas]

Muito top, a explicação!!! #Inscrito

[@MatheusBattisti]

obrigado Vinicius, hj tem vídeo novo =D

[@sergei_sg]

Matheus, thank you for your wonderful video with simple and excellent explanation at the same time! It was very useful!

[@lucianocavalcanti26]

@Matheus Battisti, tudo bem? gostei do vídeo!!! teria como fazer uma modal com tabela?

[@leonardogomes7081]

Otima a aula! Parabens pelo conteudo. Matheus poderia nos trazer uma pequena aula com o ?!

[@monstrogamer21]

Manja muito Os cursos dele na Udemy são top tbm

[@MatheusBattisti]

valeu brother!!

[@caioabraao4406]

@MatheusBattisti Como ficaria colocando varios Pop up um do lado do outro?

[@nedersimoes]

Excelente! Manja muito de css haha

[@MatheusBattisti]

grande Neder, obrigado! =))

[@victorvinicius8907]

Excelente aula! Vlwww

[@MatheusBattisti]

de nada Victor!

[@thicef]

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

[@jefersondomingos4727]

Professor você é demais

[@carmenlucia9896]

Muito bom! 👏👏👏

[@MatheusBattisti]

valeu Carmen!!

[@Mintirafro]

Rapaz, vou comprar algum curso teu pq isso me salvou no trampo de uma maneira...

[@leandrooliveira8500]

boa tarde! gosto muito dos seus videos! poderia fazer um video de cookie, para colocar no site, com aviso que o site utiliza cookie

[@thescriptkiddie]

Vídeo excelente professor, valeu!

[@jefersonbronze]

Excelente.

[@MatheusBattisti]

valeu Jeferson!

[@matheusnascimento1590]

muito bom , obrigado pela aula.

[@AndersonSantos-dq4jl]

Top de mais. Consigo aplicar a mesma ideia com React?

[@MatheusBattisti]

valeu Anderson, e com certeza, com React vc utilizaria o useState para gerenciar o status do modal, fica simples tb

[@leandrodukievicz462]

top demais...

[@MatheusBattisti]

valeu Leandro, temos quase o mesmo sobrenome, o meu é Budkewicz xD

[@leandrodukievicz462]

@@MatheusBattisti kkkk Putz o seu é ainda mais difícil kkkkk, legal,

[@camilaleutz]

Muito bom, obrigada

[@LuisFernandoGaido]

É 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?

[@adoniasdantas7629]

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?

[@jessicaagrs]

muito bom!

[@developertyler]

Oi, Matheus. Beleza? Você poderia fazer um exemplo de modal com javascript puro que tenha campos que podem ser alterados/atualizados?

[@lucas-morais-1998]

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 😅

[@MatheusBattisti]

verdade Lucas, aprendendo a fazer na mão com JS, utilizar algo assim em React fica bem mais simples =)

[@thiago-ferreira]

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 ?

[@user-wi4go9jt3h]

[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

[@icarokiilermelo]

Bem legal cara

[@the-coding-hub-r2p]

Já tenho feito Eu tô aqui só para manter o engajamento kkkkkkkk Fala sobre style-components se tiver tempo

[@MatheusBattisti]

Boa Isaac, vou trazer sim 😀

[@the-coding-hub-r2p]

@@MatheusBattisti aí eu vi vantagem kkkkkkk

[@israeldaviYT]

Olá Matheus, e possível aprender Node.js sem saber Java-Script?

[@MatheusBattisti]

é como cozinhar no fogão a gás sem o gás xD

[@guickz]

valeu, ajudou muito

[@marciocarvalho6054]

Muito bom

[@marcifernandes5134]

Nice tutorialiii

[@MatheusBattisti]

valeu Marci!

[@ПаулоОливейравич-р2б]

TOP

[@MatheusBattisti]

valeu João!

[@ПаулоОливейравич-р2б]

@@MatheusBattisti Vou participar do evento, e sou 100° inscrito no telegram :D vlw!

[@skyhook97]

Amigão como faz pra deixar com scrolling?

[@Leandro-4687]

Opa Matheus, existe um jeito muito mais simples e semântico para se fazer modal, que é utilizando a tag dialog do HTML.

[@MatheusBattisti]

opa Leandro, é uma outra alternativa tb =D

[@paulinhadev]

Esse vai ser meu Asmr de hj. Zoeira 🤣

[@MatheusBattisti]

hhahahhaha

[@joaovictorbarrosomeanda7951]

Utilizei o style.display no java script. Tem diferença entre usar style e o classList?

[@MatheusBattisti]

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

[@curiosochannel23]

Mais professor o modal também abre quando eu clico em qualquer canto da tela, como resolvo isso?

[@aranagency]

Precisei fazer modal essa semana. kkkkk

[@MatheusBattisti]

hahhaa falei que era comum! xD

[@macedo_jose]

Meu deu algum problema no JS, pq o meu modal é pra abrir quando aperta em uma opção no nav bar

[@andersonsilva857]

como posso add essa modal em mais de um botão ? pois tentei colocar em 4 mas não pega, só pega no primeiro

[@eldersantoslima7210]

boa noite, tentei fazer . mais na hora de renderizar nao esta igual

[@gustavodallago1354]

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

[@Mandioquinho]

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.

[@MatheusBattisti]

bom, aí precisaria ver o código para analisar, mas espero que tenha conseguido =)

[@felipe182souza]

o meu aconteceu isso também.

[@amadeusbertoline1139]

usei a mesma função de open modal em dois botoes diferentes, oq pode ser ?

[@devyssonsc]

O melhor jeito de usar o modal é assim com div ou com dialog?

[@AK4Web]

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.

[@williamscapini244]

Nem se compara com dialog é muito mais fácil de fazer. Essa forma fica muito mais complexa.

[@paulofarias9777]

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

[@eldersantoslima7210]

tambem nao conseguir aqui no navegador.

[@AlexandreSilva-qw4pd]

Nessas horas o Boostrap salva heheh

[@bravocosta7693]

First!

[@MatheusBattisti]

booora!

[@MatheusBattisti]

quero ver o modal saindo hahah

[@fabioguedes8041]

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.

[@angelpeleteiro9021]

Mas desse jeito o resto da página fica inclicavel

[@macedo_jose]

Meu deu algum erro!!

[@PexuPixo]

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); });

[@leandrodukievicz462]

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 ...

[@vinciuslopescamargo5759]

7:19, faz o L

[@PexuPixo]

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); });