MODAL COM JAVASCRIPT - PROJETO DE HTML, CSS E JAVASCRIPT

Подписаться 137 тыс.

Просмотров 34 тыс.

50% 1

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

Наука

Опубликовано:

25 июл 2022

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 140

@MatheusBattisti 11 месяцев назад

⭐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

@user-ho1zl9uj9w 8 месяцев назад

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

@matealves Год назад

Show!! Excelente aula professor, muito obrigado!!

@jholsas Год назад

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

@channeldel 7 месяцев назад

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

@pauloofranco5663 Год назад

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

@diegoalvessantana1219 10 месяцев назад

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

@werner.thiede Год назад

És um monstro no CSS. Ótima aula!

@tferreiraalves 10 месяцев назад

Muito bem detalhado! Top!

@thescriptkiddie Год назад

Vídeo excelente professor, valeu!

@brendatuannedafrotaaugusto2414 Год назад

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

@sergei_sg Год назад

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

@matheusnascimento1590 Год назад

muito bom , obrigado pela aula.

@bryandeodato734 7 месяцев назад

Ajudou demais, obrigado e parabéns

@junior7872 Год назад

Meu mais novo DUESSS, excelente explicação

@alexsilva-id2kl Год назад

Obrigado, melhor professor do youtube

@mbs2488 Год назад

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

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

@brunocorrea_br Год назад

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

@MatheusBattisti Год назад

obrigado Bruno, abraço!

@jefersondomingos4727 Год назад

Professor você é demais

@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

@PedroHenrique-ol7lu 9 месяцев назад

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 7 месяцев назад

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

@camilaleutz5743 Год назад

Muito bom, obrigada

@leonardogomes7081 Год назад

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

@jessicaagrs Год назад

muito bom!

@jesusvick Год назад

eu amo esse cara !

@MatheusBattisti Год назад

haha, tamo junto!

@mbs2488 Год назад

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

@MatheusBattisti Год назад

valeu Moa!

@anselmonascimento3324 Год назад

Show de bola a construção!!!

@MatheusBattisti Год назад

valeu Anselmo!

@leandroreis2694 Год назад

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

@MatheusBattisti Год назад

valeu Leandro, tamo junto! =D

@alangabriel910 Год назад

Muito massa mano, estava precisando Valeu broo 🤗👌🕶

@MatheusBattisti Год назад

valeu Alan!

@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

@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!!

@bartsilva5513 Год назад

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

@charlesdicampos4818 Год назад

Tava precisando muito!!!

@MatheusBattisti Год назад

show Charles!

@icarokiilermelo Год назад

Bem legal cara

@carmenlucia9896 Год назад

Muito bom! 👏👏👏

@MatheusBattisti Год назад

valeu Carmen!!

@mateusvieira6152 Год назад

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

@MatheusBattisti Год назад

obrigado Mateus!

@guickz 9 месяцев назад

valeu, ajudou muito

@andredias6356 Год назад

Obrigado por compartilhar seu conhecimento

@MatheusBattisti Год назад

de nada Andre, tamo junto!

@fabiodasilva1054 Год назад

Ótimo conteúdo grande Matheus 👍 parabéns

@MatheusBattisti Год назад

mto obrigado Fabio!

@augustoge71 Год назад

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

@MatheusBattisti Год назад

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

@Lima-yd3cm Год назад

Top demais professor 👏👏

@MatheusBattisti Год назад

valeuu Lima!

@tatocalinda Год назад

Show!!

@MatheusBattisti Год назад

valeuu!

@marciocarvalho6054 Год назад

Muito bom

@victorvinicius8907 Год назад

Excelente aula! Vlwww

@MatheusBattisti Год назад

de nada Victor!

@fnatans Год назад

quanta dica bacana, +1 inscrito!

@MatheusBattisti Год назад

Valeu Natan!

@Mintirafro Год назад

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

@gamervinnas Год назад

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

@MatheusBattisti Год назад

obrigado Vinicius, hj tem vídeo novo =D

@kingars 7 месяцев назад

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!

@developertyler Год назад

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

@adoniasdantas7629 6 месяцев назад

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?

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

@jefersonbronze Год назад

Excelente.

@MatheusBattisti Год назад

valeu Jeferson!

@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

@lucianocavalcanti26 Год назад

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

@macedo_jose Год назад

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

@caioabraao4406 4 месяца назад

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

@nedersimoes Год назад

Excelente! Manja muito de css haha

@MatheusBattisti Год назад

grande Neder, obrigado! =))

@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

@curiosochannel23 Год назад

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

@amadeusbertoline1139 Год назад

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

@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,

@skyhook97 Год назад

Amigão como faz pra deixar com scrolling?

@marcifernandes5134 Год назад

Nice tutorialiii

@MatheusBattisti Год назад

valeu Marci!

@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

@monstrogamer21 Год назад

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

@MatheusBattisti Год назад

valeu brother!!

@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

@lucas-mds-198 Год назад

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 =)

@user-cx7eh3kt3s Год назад

TOP

@MatheusBattisti Год назад

valeu João!

@user-cx7eh3kt3s Год назад

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

@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

@isaacnewton2307 Год назад

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 😀

@isaacnewton2307 Год назад

@@MatheusBattisti aí eu vi vantagem kkkkkkk

@LeandroBR07 Год назад

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

@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

@paulinhadev Год назад

Esse vai ser meu Asmr de hj. Zoeira 🤣

@MatheusBattisti Год назад

hhahahhaha

@aranagency Год назад

Precisei fazer modal essa semana. kkkkk

@MatheusBattisti Год назад

hahhaa falei que era comum! xD

@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

@AlexandreSilva-qw4pd Год назад

Nessas horas o Boostrap salva heheh

@Israeldavii Год назад

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

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

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

@devyssonsc Год назад

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

@AprendaWebDev 9 месяцев назад

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 8 месяцев назад

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

@angelpeleteiro9021 Год назад

Mas desse jeito o resto da página fica inclicavel

@macedo_jose Год назад

Meu deu algum erro!!

@PexuPixo Год назад

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

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