Modal (popup) FACINHO com HTML, CSS e JS - tag dialog HTML 5
Вставка
- Опубліковано 11 жов 2022
- No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você!
Descubra mais: rseat.in/3xHY1tCZY
Já precisou criar (e sofreu) um modal, um popup, com JavaScript para suas aplicações? Neste vídeo nós iremos ver a evolução da tag dialog do HTML 5.
Se você gosta de ajudar e quer retribuir pelo meu trabalho, clique no link.
/ @maykbrito
No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você!
Descubra mais: rseat.in/3xHY1tCZY
em 9minutos, ele me fez entender o que fez em js, html e css. PERFEIÇÃO DE VIDEO!!!! Parabéns pelo excelente trabalho.
Sofri recentemente pra fazer um modal decente. A criação dessa tag vai facilitar a vida! Valeu pelo conteúdo, Maykão 🫡🚀🔥
existe lib pra isso, uma bem conhecida é essa aqui ua-cam.com/video/hg66uftLsTQ/v-deo.html&ab_channel=MaykBrito
Maikão é sempre muito brabo! Um total deleite aprender com vc, man! Parabéns pelo seu trabalho!
Era o que tava faltando para o meu projeto! grato Mayk!!!
Caraca Mayk você é tão necessário!
Que conteúdo incrível ❤
Salvou muito
Parabéns pela didática, Mayk! Mais um inscrito!!!
Aula rápida, pratica e objetiva! Maykão sempre o melhor!!!
Excelente conteúdo, parabéns continue assim.
Te conheci em um dos cursinhos da rocketseat de JS e acho que vc tem uma forma de ensino muito boa e dinamica Mayk! Parabéns! :)
Conteúdo muito massa Maicão.
Veio no momento exacto.
O mundo TEC necessita de mais pessoas como vc! 😊
Salvei seu vídeo e agora estou revisitando para inplementa em um projeto, Valeu maykão!
Mayk parabéns como sempre didática sem igual, quero propor parte 2 desse conteúdo fazendo teste e caso necessário integrando ajustes no que se refere a acessibilidade.. tanto eu como meu time já passamos muitos apuros quando se fala em modal e acessibilidade.
Excelente aula, não sabia que a tag dialog já estava liberada. Muito boa.
Conteúdo simples e objetivo parabéns!!!
Boa noite. Estou acompanhando os seus vídeos e estou gostando muito. Obrigado pelas dicas
Oi Mayke já conhecia e seguia o Kevin sim, que legal, to te seguindo também pois seu trabalho é genial, que explicação clara, e objetiva, valeu muito a pena passar por aqui! Nota mil, não tinha visto esse conteudo antes, Obrigada!
Muito bom, parabéns!! Acabei de me inscrever.
Não fazia ideia dessa tag, tava fazendo tudo na mão. Obrigado pelo video
Conteúdo sensacional como sempre, Maykão!
Te adoro, vc é top! Obrigada pelos seus vídeos.
Nossa, salvou o rolê!!!! Muito obrigada!
Muito massa, ganhou um inscrito. Otima didática e excelente ideia o mapa mental.
Esse moleque manda muito bem!! Você é foda meu camarada. Parabéns!!
Obrigado pela sua paciencia , estou aprendendo muito, #gratidao
Perfeito, cara. Simples e elegante, poxa, que funcionalidade incrível. Tornou muito mais fácil o trabalho de criar modais. Valeu maykão! 👏🚀
Muito útil... obrigadão pela aula, já me inscrevi :D
Muito bom essa forma de criar Modal, vai ser super fácil agora!!! 🚀
Até que enfim achei algum Dev que usa mapa mental. Ajuda d+. Melhor tecnica que já usei
Tava sofrendo pra fazer um modal, até por ser um iniciante no front-end, seu vídeo ajudou DEMAIS cara.
Rapaz, seu aplicativo Fron-end Editor é simplesmente incrível. Parabéns pelo seu trabalho.
Cara, o tanto que esse video me ajudou não tá codado, valeu mesmo
Vídeo muito bem dinâmico, muito bom!
Simples e pratico, amei!
Cara cq legal, nem imaginava q isso já tinha pronto dentro do CSS, eu sempre fiz TD na mão, bem legal
Que maravilhoso!!! Tomara que na nova versão do Bootstrap já implementei essa no lugar de todas aquelas divs heuaheha
Vídeo incrível, procurando sobre ideias para componentes usando streamlit Python
Boa noite Mayk, fantástica essa tag, antes era realmente bem complexo e trabalhoso tanto o html quanto js. Muito boa a sua dica e sua aula parabéns.
Ótimo conteúdo. Obrigado ☺️😊
Muito bom e fácil na criação de pop up's. Valeu pela dica! Enfrentei um probleminha: Se colocar no seletor * limpa todos os espaços e margens, inclusive da tag dialog (não fica centralizada), usar margin: 0 e padding: 0 no elemento body do css.
Mai noossa!!!! Já sofri horrores fazendo modal! Fantástico esse seu método! ❤ Vc salvou minha vida! Sem contar na outra dica maravilhosa do mapa mental! Show de bola! Gratidão 🙏 muito obrigada por compartilhar seus conhecimentos! Deus o abençoe sempre! Sucesso pra vc mestre! 👏👏👏🙌
Muito bom, meu deus... Já me inscrevi!
Cara esse vídeo me ajudou muito, simples mas eficiente🎉
Sensacional, cara! foi top
Não acredito que que eu não conhecia isso kkk Obrigado!!!!!
Conteudo top, inscrito, joinha, sininho e comentando! Valeuu
Muito Top! Ajudou bastante!
Adorei, ajudou muito 💜💜💜
TOP D+.... Tenho 4 elementos na página e preciso criar um desse pra cada, vou tentar agora!
Sempre seguindo, 100000 likes sempre from Portugal. ♥ Mayk é fantástico!
Obg Luis ☺
Show Maykão! Sauddes!!
Ta show !!
Parabéns
Excelente conteúdo!
Fantástico. Obrigado.
Minha nossa, adorei o vídeo por completo, não só o conteúdo como a maneira como você explica.
obg pelo comentário brother! espero continuar te ajudando nos próximos
Caramba isso vai facilitar muito a minha vida! obrigada Mayk pelo excelente conteúdo
uhulll!! tmj 😍
a partir de quando essa funcionalidade já estava disponível no HTML? n sabiaaa, muito show!
gosto da sua felicidade ao ensinar isso
Monstro d mais
Com certeza merece o like 👍🏻.
Sabe o que vou tentar?.. é fazer animação pra entrar com esse modal rs.
Se tiver como dá animação de forma nativa, faz uma aula com isso. 👍🏻
Valeu 👍🏻
Ganhou um inscrito!
Sensacional
Muito bom!
Como sempre, arrasa!
Será que já está disponível em todos os navegadores?
Grato, Mano!
Sucesso sempre!
Vida longa ao canal!
Pô, muito mais prático. Maravilha.
Melhor que essa nova tag é a sua explicação!! Sempre com conteúdo de altíssima qualidade!
Valeu BRUNÃO!
mayk, isso ai eu achei muito foda, mandei pra todos os meus amigos fronts e todo mundo adorou, até por uma questão de acessibilidade essa tag dialog vai ajudar demais, sempre achei que deveria existir uma tag para isso
Shoowwww demais Luiz 💛 Que massa que a galera curtiu!
Continua nessa pegada legal conhecer essa TAG
shoow Felipe! Obg pelo comentário!
Adoorrrei, foi muito simples de entender... continua assim força, me salvou!
Q bacana ! Obrigado
Muito bom e prático Vlw
Muito bom 👏👏
Q video top, viu! Obrigado, meu irmão!
Tmj 💛🤗
Mapas mentais é incrível tem me ajudado muito... dica incrível Mayk. Gratidão
Shooww!! Eu lembro quando aprendi sobre mapas mentais e passei em todas as matérias da faculdade por causa da técnica hehe É muito bom mesmo 💛
Sensacional
Muito top Maykao! Estou montando uma biblioteca de componentes UI open source, e quando chegar no dialog, com essas dicas, vai ficar tudo mais fácil!
opaa!! que massa isso Gus!! Brabíssimo!
Muito bom, Mayk. Excelente dica, obrigado. Me inscrevi no canal.
A única coisa chata é q meu navegador está dando q a propriedade box-shadow é inexistente, então não consigo mudar o efeito padrão do fundo. Não sei se é erro do meu S.O. (Ubuntu/Chrome), não testei em outro navegador pra ver. Mas enfim, de qualquer forma foi uma excelente dica, uma das melhores.
Mano ainda nem assisti, mas só esse editor aí já valeu o like, a inscrição e o comentário.
Obg :)
It's just awesome
É impressionante como as coisas vão ficando cada vez mais fáceis, otimizadas. Muito obrigado por compartilhar este conhecimento !
total! tmj!
Show!!!
Podem continuar a partilhar conteúdo assim. Porquê as aulas que duram horas aborrecem.
Fazer modal da forma antiga dá trabalho msm.
Vlw pelo conteúdo e parabéns.
Fiquei com dúvida se os navegadores já estão suportando essa TAG e se no react já funciona.
obrigado pelo vídeo!
🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯, top demais!!
ce ta doido top demais kk
chega de div nos modal, que top demais, essa implementação dessa tag
ufa né? finalmente eheh
Muito bom
Maykao fera demais!!!
valeu Alex!
Valeu!
Topp Mayk!
Comecei a ver o vídeo sem muitas expectativas , e na metade do video eu já estava falando :
- olha que delicinha esse metodo
- Não acredito naquele pseudo elemento, esse efeito está muito delicinha
Dica matadora, delicinha demais.
Legal!!👍
MUITO BOM
simples e top.
Facilitou muito mesmo!!! Essa nova tag é compatível em todos os navegadores em suas versões atuais Mayk?
Mayk, parabéns pelo vídeo!
Uma dúvida de bastidor... qual o software você utiliza para gerir a gravação de tela + sua facecam?
Você também utiliza o áudio integrado/sincronizado?
Muito dahora fazer isso dessa forma só para fins de conhecimento, só que é muitoooo mais fácil e rápido fazer com bootstrap ou bulma
Incrivel como os modals de hoje em dia estão cada vez mais simplificados. Obrigado por compartilhar.
Agora tenho outra duvida, quero colocar também a opção de fechar o modal clicando fora dele, mas ele não cria um "wrapper" e geralmente clicamos nese wrapper pra poder fechar com o script convencional. Como fazemos com este?
Obrigado
Cara, tens uma didática diferente dos demais, fazes tudo parecer fácil...sempre assisto suas dicas!
Tmj