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

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ม.ค. 2025

ความคิดเห็น • 207

  • @maykbrito
    @maykbrito  8 หลายเดือนก่อน

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

  • @bySpeedyX
    @bySpeedyX ปีที่แล้ว +13

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

  • @geraldoneto4869
    @geraldoneto4869 2 ปีที่แล้ว +52

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

    • @CarlosSilva-hy8xt
      @CarlosSilva-hy8xt 2 ปีที่แล้ว +3

      existe lib pra isso, uma bem conhecida é essa aqui th-cam.com/video/hg66uftLsTQ/w-d-xo.html&ab_channel=MaykBrito

  • @brunogomes2909
    @brunogomes2909 2 ปีที่แล้ว +11

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว +3

      Valeu BRUNÃO!

  • @leticialima6639
    @leticialima6639 ปีที่แล้ว +1

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

  • @VicenteCarlosFernandes
    @VicenteCarlosFernandes ปีที่แล้ว +1

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

  • @rebeca-felicissimo
    @rebeca-felicissimo 3 หลายเดือนก่อน

    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.

  • @TalesCembraneliDantas
    @TalesCembraneliDantas 2 ปีที่แล้ว

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

  • @fernandoi.kobayashi9826
    @fernandoi.kobayashi9826 2 ปีที่แล้ว +10

    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
      @luizfilipeyep 4 หลายเดือนก่อน +1

      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 😉

  • @franciscojunior2052
    @franciscojunior2052 ปีที่แล้ว

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

  • @renatosoaresdasilva360
    @renatosoaresdasilva360 2 หลายเดือนก่อน

    Amei. Ótima explicação !

  • @leticiabaungardt5853
    @leticiabaungardt5853 2 หลายเดือนก่อน

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

  • @Gabriel-oo4ir
    @Gabriel-oo4ir ปีที่แล้ว

    gosto da sua felicidade ao ensinar isso

  • @sssouto241
    @sssouto241 ปีที่แล้ว

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

  • @marciomagalhaes432
    @marciomagalhaes432 10 หลายเดือนก่อน

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

    • @maykbrito
      @maykbrito  10 หลายเดือนก่อน +1

      Obg :)

  • @sheillamartins7027
    @sheillamartins7027 2 ปีที่แล้ว

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

  • @douglasdoro
    @douglasdoro ปีที่แล้ว

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

  • @vimicos
    @vimicos ปีที่แล้ว

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

  • @ralfwalker
    @ralfwalker ปีที่แล้ว

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

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

  • @BrunoSilverrrrrr
    @BrunoSilverrrrrr 2 ปีที่แล้ว +2

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

  • @igor972
    @igor972 2 ปีที่แล้ว

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

  • @JulioSantanatjrj
    @JulioSantanatjrj 2 ปีที่แล้ว

    Valeu!

  • @matheusporezeli1555
    @matheusporezeli1555 ปีที่แล้ว

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

  • @jhonyluz1640
    @jhonyluz1640 2 ปีที่แล้ว

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

  • @buka2021
    @buka2021 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  ปีที่แล้ว

      Q bacana ! Obrigado

  • @grazimorales33
    @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! 👏👏👏🙌

  • @virtualservicosmg
    @virtualservicosmg 5 หลายเดือนก่อน

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

  • @rafinha-dev
    @rafinha-dev 2 ปีที่แล้ว

    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.

  • @matheusvieirazambon9612
    @matheusvieirazambon9612 ปีที่แล้ว

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

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

  • @felipeassumpcao3039
    @felipeassumpcao3039 2 ปีที่แล้ว

    Continua nessa pegada legal conhecer essa TAG

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      shoow Felipe! Obg pelo comentário!

  • @vitorwave
    @vitorwave 2 ปีที่แล้ว +1

    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

  • @robotinike
    @robotinike 2 ปีที่แล้ว

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

  • @yagamikisuke
    @yagamikisuke 6 หลายเดือนก่อน

    Conteúdo sensacional como sempre, Maykão!

  • @pedrofranco9028
    @pedrofranco9028 2 ปีที่แล้ว

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

  • @flaviosantos3169
    @flaviosantos3169 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      ufa né? finalmente eheh

  • @anselmo17
    @anselmo17 2 ปีที่แล้ว +1

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

  • @jiujis1705
    @jiujis1705 2 ปีที่แล้ว

    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
      @maykbrito  2 ปีที่แล้ว +1

      Shoowwww demais Luiz 💛 Que massa que a galera curtiu!

  • @emersonrafael5576
    @emersonrafael5576 ปีที่แล้ว

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

  • @CarvalhoDFabio
    @CarvalhoDFabio 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว +1

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

  • @felipebrenno8675
    @felipebrenno8675 ปีที่แล้ว

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

  • @GuilhermeOmetto
    @GuilhermeOmetto 2 ปีที่แล้ว +1

    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.

  • @jglopesdev
    @jglopesdev ปีที่แล้ว

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

  • @eualexslim
    @eualexslim 2 ปีที่แล้ว

    Maykao fera demais!!!

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว +1

      valeu Alex!

  • @valmirarozalino
    @valmirarozalino 2 ปีที่แล้ว

    Obrigado pela sua paciencia , estou aprendendo muito, #gratidao

  •  2 ปีที่แล้ว +2

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

  • @lucasbarra8091
    @lucasbarra8091 ปีที่แล้ว

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

  • @codegusoficial
    @codegusoficial 2 ปีที่แล้ว

    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
      @maykbrito  2 ปีที่แล้ว

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

  • @alexarcanjo515
    @alexarcanjo515 6 หลายเดือนก่อน

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

  • @macielthales
    @macielthales ปีที่แล้ว

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

  • @samuelribeiro7940
    @samuelribeiro7940 2 ปีที่แล้ว

    Excelente conteúdo, parabéns continue assim.

  • @resende.dayvison
    @resende.dayvison 2 ปีที่แล้ว

    Ganhou um inscrito!
    Sensacional

  • @fabianalima7529
    @fabianalima7529 2 ปีที่แล้ว

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

  • @AlexSilva-sd6jf
    @AlexSilva-sd6jf 2 ปีที่แล้ว

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

  • @joelmoltocaro2024
    @joelmoltocaro2024 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว +1

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

  • @fulviavaz
    @fulviavaz 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      uhulll!! tmj 😍

  • @grazimorales33
    @grazimorales33 ปีที่แล้ว

    O mundo TEC necessita de mais pessoas como vc! 😊

  • @jair-araujo
    @jair-araujo 2 ปีที่แล้ว

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

  • @la_pandora
    @la_pandora ปีที่แล้ว

    Simples e pratico, amei!

  • @wesleylopex
    @wesleylopex 2 ปีที่แล้ว

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

  • @vitormelo22
    @vitormelo22 2 ปีที่แล้ว

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

  • @llucasmotta
    @llucasmotta 2 ปีที่แล้ว

    Excelente conteúdo!

  • @eltonrazzini89
    @eltonrazzini89 2 ปีที่แล้ว

    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
      @maykbrito  2 ปีที่แล้ว

      Sim! Details é bem legal tbm

  • @johanwerther
    @johanwerther ปีที่แล้ว

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

  • @ameliavianapereiradeandrad9453
    @ameliavianapereiradeandrad9453 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      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 💛

  • @guir
    @guir ปีที่แล้ว

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

  • @luizinhogm
    @luizinhogm 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว

      Obg Luis ☺

  • @luizfelipesiqueirasouza3166
    @luizfelipesiqueirasouza3166 2 ปีที่แล้ว

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

  • @reinaldodev
    @reinaldodev 2 ปีที่แล้ว

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

  • @eggescobar
    @eggescobar 2 ปีที่แล้ว

    Adeus modal do Bootstrap! Excelente vídeo!

  • @marcosmacedoo_dev
    @marcosmacedoo_dev 2 ปีที่แล้ว

    Sensacional

  • @everson_vinicius
    @everson_vinicius 2 ปีที่แล้ว

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

  • @NerdseGamersBr
    @NerdseGamersBr ปีที่แล้ว

    Monstro d mais

  • @TomazEdson25
    @TomazEdson25 2 ปีที่แล้ว

    Show Maykão! Sauddes!!

  • @portalmundoweb
    @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 👍🏻

  • @DllacyLimaJr
    @DllacyLimaJr 2 ปีที่แล้ว

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

  • @cassianocominetti7784
    @cassianocominetti7784 2 ปีที่แล้ว

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

  • @FranciscoJunior29
    @FranciscoJunior29 2 ปีที่แล้ว

    Ótimo conteúdo. Obrigado ☺️😊

  • @guylhermef1219
    @guylhermef1219 2 ปีที่แล้ว

    Show!!!

  • @ThePrikasouza
    @ThePrikasouza 4 หลายเดือนก่อน

    Nossa vai facilitar a vida🎉

  • @boca99
    @boca99 ปีที่แล้ว

    Pô, muito mais prático. Maravilha.

  • @mikaelespinola
    @mikaelespinola ปีที่แล้ว

    Sensacional, cara! foi top

  • @gabrielfscosta
    @gabrielfscosta 2 ปีที่แล้ว

    Muito bom!!!

  • @NelioBraga-n8i
    @NelioBraga-n8i 9 หลายเดือนก่อน

    Ta show !!
    Parabéns

  • @rairockbrasil
    @rairockbrasil 2 ปีที่แล้ว

    ce ta doido top demais kk

  • @viniciusm.m.7822
    @viniciusm.m.7822 2 ปีที่แล้ว

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

    • @maykbrito
      @maykbrito  2 ปีที่แล้ว +1

      Tmj 💛🤗

  • @mariovarela99
    @mariovarela99 2 ปีที่แล้ว

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

  • @LeandrosilvaHair
    @LeandrosilvaHair 2 ปีที่แล้ว

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

  • @MhaickyOro
    @MhaickyOro 2 ปีที่แล้ว

    Fantástico. Obrigado.

  • @rafinhafernandes3614
    @rafinhafernandes3614 2 ปีที่แล้ว

    Tive um problema em coloca-la no wordpress ...
    Pois dentro dela tem um botão que abre a modal do próprio wordpress de seleção de mídia.
    O problema é que essa modal ficou por trás do dialog e eu não consegui trazer pra frente com o z-index.
    Sobre o vídeo, parabéns pela didática e pelo conteúdo

  • @R6videos6R
    @R6videos6R 2 ปีที่แล้ว +2

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

  • @laitongarcia3065
    @laitongarcia3065 2 ปีที่แล้ว

    Muito bom

  • @luc.castro
    @luc.castro ปีที่แล้ว

    Muito Top! Ajudou bastante!

  • @DiogoScarmagnani
    @DiogoScarmagnani 2 ปีที่แล้ว

    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.

  • @maicon484
    @maicon484 29 วันที่ผ่านมา

    Um exemplo: Vamos supor que criei 5 cards produtos e dentro de cada card tem,
    imgProdut, titleProdut, priceProdut, bntProdutDetails e um bntBuy.
    Agora quando clicar em um bntProdutDetails aparece o detalhes deste produto...
    gostaria de um Video assim !

  • @diegosantos-jq5nd
    @diegosantos-jq5nd 2 ปีที่แล้ว

    Topp Mayk!

  • @LowerGdev
    @LowerGdev 5 หลายเดือนก่อน

    Top dms, valeu ajudou dms

  • @mauriciodias6601
    @mauriciodias6601 ปีที่แล้ว +1

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

  • @brunomodinuti2228
    @brunomodinuti2228 2 ปีที่แล้ว

    Muito bom 👏👏