Como criar uma JANELA MODAL com HTML, CSS e JavaScript
Вставка
- Опубліковано 20 сер 2024
- ✅ Quer ter acesso a projetos exclusivos que vão agregar ainda mais na sua carreira? Torne-se membro do Inteliogia:
bit.ly/program...
Já tentou criar uma janela que abre por cima do seu site para inserir um cadastro na newsletter por exemplo. Então nesse vídeo eu te ensino a criar isso, o que chamamos de janela modal de uma maneira muito fácil e simples, vamos utilizar apenas HTML, CSS e JavaScript.
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiatech
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 rbruno216@gmail.com
✅ CASO SEJA DO SEU INTERESSE:
🔹 Essa é uma bibliografia que eu recomendo para você começar a se especializar no ramo da programação e desenvolvimento web:
▸Como fazer um MENU SCROLL com CSS - Mão no Código: • Como fazer um MENU SCR...
▸Como personalizar a SCROLLBAR do site com CSS: • Como personalizar a SC...
▸Como criar o EFEITO PARALLAX com HTML e CSS: • Como criar o EFEITO PA...
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼💻
Existem pessoas que dao tutoriais, mas voce deu AULA! gosto de gente que explica cada virgula que ta dando e voce fez isso! adorei! Obrigada
Muito obrigado Stephany. De verdade msm 🧡
Velho, o problema é saber como pesquisar essas coisa que tem um nome específico. Ainda bem que achei teu video
Isso é bem melhor que o modal do Bootstrap.
Amigo, assisti este vídeo, aprendendo, aplicando e testando essas orientações, e só tenho a dizer: Parabéns! Parabéns! Parabéns! Ah sim! também, obrigado pela explicação bem detalhada e de forma didática muito bem apresentada. Valeu mesmo! Hoje (20/09/2023), fiquei o dia inteiro procurando uma solução assim (principalmente porque não queria usar bootstrap). E seguindo seu vídeo, foi como uma receita de bolo. Deu certinho! Valeu, obrigado!
Parabéns mestre, aula tanto para para o iniciante na programação como para os cascudos como eu, mas que no meu caso não saco muito de css e js.
Estava procurando um exemplo para usar a tag e fazer uma entrada simples modal.
No começo não queria ver nenhuma explicação mais detalhada pois estava com "pressa"
POREM, como o resultado de seu modal é muito bom e está muito explicado deixei minha "pressa" de
lado e estou usando seu exemplo no meu projeto deixando de lado tambem a tag
Enfim, parabens... ganhou mais um inscrito por puro mérito! 👏👏👏
Abraço e obrigado por compartilhar tu conhecimento !!
Simplesmente o vídeo mais didático que encontrei. Obrigado por compartilhar esse conhecimento!
Pow mano, muito obrigado cara 😁👏
to passada... quem sabe faz na simplicidade e brilha mesmo!... E o bootsptrap deixo pra lá...
parabéns.. ganhou mais um inscrito. Você explica muito bem!!
js eh ez ,tive dificuldade foi nessa degraca de css,me ajudou mt value
que didática é essa, tudo bem simplificado!!!
Obrigado amigo! vc me ajudou mt a finalizar o meu projeto da facul, ganhou like e um inscrito novo!
Você é muito bom, meu amigo. Nota mil!
excelente didatica. É muito bom e está muito explicadinho obrigada!
Excelente explicação e didática. Parabéns pela aula!!
Por favor, faça um vídeo fazendo um formulário com
Muito bom o vídeo, parabéns!
Show! Parabéns pela excelente aula.
Muito massa! vou fazer junto!
Didática ótima!
o cara explica melhor que o meu professor de programação🤓
Kkkkkkkk que honra viu kkkkkkk
Muito top. Bem didático.
estou aprendendo muito com voce!!
Vc n sabe como eu fico feliz em saber disso Jeniffer 🥰💕
Excelente!🤝
Muito bom. Meus parabéns!!
vc pode usar a tag é bem mais rápido
Pois é, você tem razão, más acho que o foco aí seria ensinar mesmo como " fazer uma janela modal ", pra quem gosta mesmo de entender o funcionamento do negócio.
@@cteclaudiobritocaruaru-pe9889 entendi, aliás excelente aula, parabéns.
Muito bom a dica de como criar um modal com html, css e javascript. Como seria fechar o modal com efeito, ainda está fechando muito seco
Sim realmente faltou ensinar isso kkkkkkkk
Mano, prepara um curso completo de Javascript, mesmo que seja do nível básico🙏
Maravilhoso ,, parabéns mano 👏👏👏👏
Tamo junto mano 👊🏼👊🏼
Excelente video
Ajudou muito obg❤
queria fazer com o mesmo efeito ambos quando clicar em abrir e sair o efeito da animação
Me diverti muito com o sotaque dele kkkkkkkkk
mto massa o video..... e bem explicativo, claro e não demora.... gostei bastante
so que tem alguns problemas, eu tentei de diversas formas replicar isso mais de uma vez, tipo colocar um segundo botao para abrir uma segunda div com mais informações...... ate agora nao consegui :(
fala irmão! obrigado viu kkkkkk sobre essa dificuldade que vc ta enfrentando, é importante que você coloque a propriedade "onclick" diferente para cada modal.
Por exemplo, para abrir o modal A, vc precisa definir no botão: onclick = "abrirModalA( )", o mesmo para o modal B e assim vai
Além disso, cada modal tem que ter sua própria estrutura, então se vc está tentando criar mais de um modal no seu site, faça o passo a passo desse vídeo para cada modal, só trocando os nomes para cada um deles
@@InteliogiaDev obrigado... me ajudou bastante... dpois de sua dica ficou até mais fácil replicar em alguns projetinho q tenho aqui 😁
Mermão u é pika demais pqp
Funcionou até a hora de fechar o modal --'
Mano, dá uma comparada do seu código com o código do vídeo, provavelmente vc errou algo no javascript 😉
como faço pro meu modal ficar sobre meu site?
por exemplo, quando eu abro ele, a primeira estrutura do meu site desce e so aparece o modal, nao fica nada no fundo sabe?
Top demais!
Como funcionaria isso em dispositivo móvel?
Podemos diminuir o tamanho do modal através das media querys mano. Eu realmente vacilei kkkkk deveria ter ensinado nesse tutorial
muito bom o vídeo, mas fiz tudo certinho e coloquei o modal lá no final do body, quando eu clicko e ele abre n preenche a tela toda, fica lá em baixo :(
Fala Ian, cara se o meu funcionou o teu tbm é para tá funcionando kkkkkk dá uma conferida no código aí, vê se vc fez igual msm. TMJ!
Coloque o position fixed no lugar do position relative.
@@Naumri Resolveu!!! obrigado por isso!
.janela-modal.abrir {}
tenho uma dúvida. E se eu tiver mais que um botão e janelas modais para abrir. Como ficaria este código? Fiquei na dúvida mas parabéns. Aprendi algo!
Gente, eu estava fazendo esse projeto para meu portifólio, aonde ao clicar em um trabalho meu iria abrir um modal contendo as informações do trabalho só que esse modal que eu fiz esta aparece no fim do site e não em cima, como o professor mostrou que o modal fica em cima do botão, oque poderia ter dado errado?
Gente consegui, o position estava relative, ai eu coloquei o position : fixed
PÔ CARA!!! Estava tudo indo bem... Até que vc falou "vou colocar o dedinho" 🤦♂ Tá de brincadeira!!!