Modal (popup) FACINHO com HTML, CSS e JS - tag dialog HTML 5

[@maykbrito]

No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você! Descubra mais: rseat.in/3xHY1tCZY

[@bySpeedyX]

em 9minutos, ele me fez entender o que fez em js, html e css. PERFEIÇÃO DE VIDEO!!!! Parabéns pelo excelente trabalho.

[@geraldoneto4869]

Sofri recentemente pra fazer um modal decente. A criação dessa tag vai facilitar a vida! Valeu pelo conteúdo, Maykão 🫡🚀🔥

[@CarlosSilva-hy8xt]

existe lib pra isso, uma bem conhecida é essa aqui kzbin.info/www/bejne/npiZZ6icqbGmirM&ab_channel=MaykBrito

[@brunogomes2909]

Melhor que essa nova tag é a sua explicação!! Sempre com conteúdo de altíssima qualidade!

[@maykbrito]

Valeu BRUNÃO!

[@leticiabaungardt5853]

Explicação clara e sucinta, explicou cada parte do código, ficou muito claro pra mim, video excelenteeee!!!!

[@rebeca-felicissimo]

Que demais Mayk, sua didática é a melhor que já até hoje nesse meio. Sucesso meu querido e obrigada por estar sempre postando conteúdo para nos ajudar. Bem que você poderia criar um curso de html, css e js aqui pro youtube (desvinculado da rocketseat), seria demais, melhor canal.

[@leticialima6639]

Nossa, salvou o rolê!!!! Muito obrigada!

[@TalesCembraneliDantas]

Cara cq legal, nem imaginava q isso já tinha pronto dentro do CSS, eu sempre fiz TD na mão, bem legal

[@marciomagalhaes432]

Mano ainda nem assisti, mas só esse editor aí já valeu o like, a inscrição e o comentário.

[@maykbrito]

Obg :)

[@VicenteCarlosFernandes]

Rapaz, seu aplicativo Fron-end Editor é simplesmente incrível. Parabéns pelo seu trabalho.

[@franciscojunior2052]

Esse moleque manda muito bem!! Você é foda meu camarada. Parabéns!!

[@Gabriel-oo4ir]

gosto da sua felicidade ao ensinar isso

[@renatosoaresdasilva360]

Amei. Ótima explicação !

[@douglasdoro]

Cara, que loucura! Desenvolver com HTML5 e CSS hoje em dia é moleza! Obrigado pelo conteúdo!

[@maykbrito]

Tmj Douglas!

[@virtualservicosmg]

TOP D+.... Tenho 4 elementos na página e preciso criar um desse pra cada, vou tentar agora!

[@igor972]

Até que enfim achei algum Dev que usa mapa mental. Ajuda d+. Melhor tecnica que já usei

[@matheusporezeli1555]

Cara, o tanto que esse video me ajudou não tá codado, valeu mesmo

[@vimicos]

Não fazia ideia dessa tag, tava fazendo tudo na mão. Obrigado pelo video

[@buka2021]

Adoorrrei, foi muito simples de entender... continua assim força, me salvou!

[@maykbrito]

Q bacana ! Obrigado

[@sssouto241]

Boa noite. Estou acompanhando os seus vídeos e estou gostando muito. Obrigado pelas dicas

[@JulioSantanatjrj]

Valeu!

[@flaviosantos3169]

chega de div nos modal, que top demais, essa implementação dessa tag

[@maykbrito]

ufa né? finalmente eheh

[@geovanesilva6410]

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.

[@jhonyluz1640]

Salvei seu vídeo e agora estou revisitando para inplementa em um projeto, Valeu maykão!

[@felipeassumpcao3039]

Continua nessa pegada legal conhecer essa TAG

[@maykbrito]

shoow Felipe! Obg pelo comentário!

[@matheusvieirazambon9612]

Tava sofrendo pra fazer um modal, até por ser um iniciante no front-end, seu vídeo ajudou DEMAIS cara.

[@fernandoi.kobayashi9826]

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.

[@luizfilipeyep]

Isso pode afetar outros elementos, a melhor opção seria criar um seletor dialog e setar margin: 0 e padding: 1em, que é o padrão pra essa tag. Assim vai centralizar normalmente com o showModal(). Fica a dica 😉

[@robotinike]

É impressionante como as coisas vão ficando cada vez mais fáceis, otimizadas. Muito obrigado por compartilhar este conhecimento !

[@maykbrito]

total! tmj!

[@sheillamartins7027]

Te adoro, vc é top! Obrigada pelos seus vídeos.

[@rafinha-dev]

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.

[@grazimorales33]

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! 👏👏👏🙌

[@ralfwalker]

Muito bom, meu deus... Já me inscrevi!

[@CarvalhoDFabio]

Minha nossa, adorei o vídeo por completo, não só o conteúdo como a maneira como você explica.

[@maykbrito]

obg pelo comentário brother! espero continuar te ajudando nos próximos

[@yagamikisuke]

Conteúdo sensacional como sempre, Maykão!

[@valmirarozalino]

Obrigado pela sua paciencia , estou aprendendo muito, #gratidao

[@pedrofranco9028]

Conteúdo muito massa Maicão. Veio no momento exacto.

[@joelmoltocaro2024]

Brito na área! Não entendo nada, só assisto pra matar a saudade!!!!!!

[@maykbrito]

JOELZAUM!!! hahaah Sempre bom ter você por aqui amigo 😍

[@felipebrenno8675]

Muito massa, ganhou um inscrito. Otima didática e excelente ideia o mapa mental.

[@anselmonascimento3324]

Conteúdo simples e objetivo parabéns!!!

[@jglopesdev]

Conteudo top, inscrito, joinha, sininho e comentando! Valeuu

[@alexarcanjo515]

Cara esse vídeo me ajudou muito, simples mas eficiente🎉

[@emersonrafael5576]

Vídeo incrível, procurando sobre ideias para componentes usando streamlit Python

[@BrunoSilverrrrrr]

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! :)

[@eualexslim]

Maykao fera demais!!!

[@maykbrito]

valeu Alex!

[@jiujis1705]

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

[@maykbrito]

Shoowwww demais Luiz 💛 Que massa que a galera curtiu!

[@eggescobar]

Adeus modal do Bootstrap! Excelente vídeo!

[@samuelribeiro7940]

Excelente conteúdo, parabéns continue assim.

[@wesleylopex]

a partir de quando essa funcionalidade já estava disponível no HTML? n sabiaaa, muito show!

[@lucasbarra8091]

Muito útil... obrigadão pela aula, já me inscrevi :D

[@grazimorales33]

O mundo TEC necessita de mais pessoas como vc! 😊

[@fulviavaz]

Caramba isso vai facilitar muito a minha vida! obrigada Mayk pelo excelente conteúdo

[@maykbrito]

uhulll!! tmj 😍

[@moniquenavarro4131]

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!

[@ameliavianapereiradeandrad9453]

Mapas mentais é incrível tem me ajudado muito... dica incrível Mayk. Gratidão

[@maykbrito]

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 💛

[@jair-araujo]

Muito bom essa forma de criar Modal, vai ser super fácil agora!!! 🚀

[@codegus_]

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!

[@maykbrito]

opaa!! que massa isso Gus!! Brabíssimo!

[@guir]

Não acredito que que eu não conhecia isso kkk Obrigado!!!!!

[@vitormelo22]

Excelente aula, não sabia que a tag dialog já estava liberada. Muito boa.

[@fabianalima7529]

Muito bom, parabéns!! Acabei de me inscrever.

[@macielthales]

Maikão é sempre muito brabo! Um total deleite aprender com vc, man! Parabéns pelo seu trabalho!

[@boca99]

Pô, muito mais prático. Maravilha.

[@llucasmotta]

Excelente conteúdo!

[@la_pandora]

Simples e pratico, amei!

[@AlexSilva-sd6jf]

Parabéns pela didática, Mayk! Mais um inscrito!!!

[@reinaldodev]

Que maravilhoso!!! Tomara que na nova versão do Bootstrap já implementei essa no lugar de todas aquelas divs heuaheha

[@resende.dayvison]

Ganhou um inscrito! Sensacional

[@GuilhermeOmetto]

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.

[@everson_vinicius]

Perfeito, cara. Simples e elegante, poxa, que funcionalidade incrível. Tornou muito mais fácil o trabalho de criar modais. Valeu maykão! 👏🚀

[@LeandrosilvaHair]

🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯, top demais!!

[@luizfelipesiqueirasouza3166]

Vídeo muito bem dinâmico, muito bom!

Cara, tens uma didática diferente dos demais, fazes tudo parecer fácil...sempre assisto suas dicas!

[@maykbrito]

Tmj

[@johanwerther]

Caraca Mayk você é tão necessário! Que conteúdo incrível ❤ Salvou muito

[@vitorwave]

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

[@cassianocominetti7784]

Aula rápida, pratica e objetiva! Maykão sempre o melhor!!!

[@portalmundoweb]

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 👍🏻

[@viniciusm.m.7822]

Q video top, viu! Obrigado, meu irmão!

[@maykbrito]

Tmj 💛🤗

[@luizinhogm]

Sempre seguindo, 100000 likes sempre from Portugal. ♥ Mayk é fantástico!

[@maykbrito]

Obg Luis ☺

[@FranciscoJunior29]

Ótimo conteúdo. Obrigado ☺️😊

[@DllacyLimaJr]

Era o que tava faltando para o meu projeto! grato Mayk!!!

[@eltonrazzini89]

Descobri recentemente uma tag HTMl que faz algo parecido sem js que seria a nunca tinha visto alto desta, mas não cria um modal na verdade e sim uma algo como accordeon de um bootstrap

[@maykbrito]

Sim! Details é bem legal tbm

[@TomazEdson25]

Show Maykão! Sauddes!!

[@mikaelespinola]

Sensacional, cara! foi top

[@diegosantos-jq5nd]

Topp Mayk!

[@ThePrikasouza]

Nossa vai facilitar a vida🎉

[@nathalyak4362]

Adorei, ajudou muito 💜💜💜

[@NerdseGamersBr]

Monstro d mais

[@luc.castro]

Muito Top! Ajudou bastante!

[@NelioBraga-n8i]

Ta show !! Parabéns

[@MhaickyOro]

Fantástico. Obrigado.

[@R6videos6R]

A cada dia aparece uma tag HTML que eu não conhecia haha

[@maykbrito]

Vdd kkk

[@brunomodinuti2228]

Muito bom 👏👏

[@LowerGdev]

Top dms, valeu ajudou dms

[@douglasneres618]

Muito bom e prático Vlw

[@mariovarela99]

Podem continuar a partilhar conteúdo assim. Porquê as aulas que duram horas aborrecem.

[@rairockbrasil]

ce ta doido top demais kk

[@marcosmacedoo_dev]

Sensacional

[@gabrielfscosta]

Muito bom!!!

[@DiogoLScarmagnani]

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.

obrigado pelo vídeo!

[@mauriciodias6601]

Como sempre, arrasa! Será que já está disponível em todos os navegadores? Grato, Mano! Sucesso sempre! Vida longa ao canal!

[@aliriorios3699]

Acabo de assistir umas aulas na trilha do rocketseat e dou play no vídeo sem ver de quem era, tomei um susto com a mesma voz kkkkkkkk