Como criar uma modal com a tag dialog \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 17 Horas 51 Min 14 Seg Tempo restante da oferta: 17 51 14 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Como criar uma modal com a tag dialog [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # Como criar uma modal com a tag dialog Domine modais em HTML com a tag 'dialog'. Crie, personalize e interaja em seu site. Torne-o envolvente e moderno! [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 3 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Como_criar_uma_modal_com_a_tag_dialog.jpg) Um dos componentes mais comuns da web é a modal, ou, os chamados pop-up. Podemos utilizar esse componente para várias situações, tanto dar ao usuário um aviso que chame atenção, quanto simplemente chama-lo para newsletter. Enfim, seu uso é bem flexivel e hoje aprenderemos como criar uma modal utilizando ferramentas básica, que são o [HTML](https://www.treinaweb.com.br/blog/guia-da-linguagem-html "HTML"), [CSS](https://www.treinaweb.com.br/blog/guia-da-linguagem-css "CSS") e [JavaScript](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript "JavaScript"). [ ![HTML5 + CSS3 - Apresentação de Dados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Apresentação de Dados Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-e-css3-apresentacao-de-dados) ## Iniciando a nossa modal com HTML A princípio, criaremos a estrutura, todo o conteúdo da modal e o botão que irá disparar o evento de abertura da nossa modal. Vamos iniciar com o botão de abertura. ```html Abrir modal ``` Aqui criamos o botão com o texto `Abrir modal`, já aproveitei e adicionei o id `abrir-modal`. Esse id irá nos auxiliar a capturar esse elemento e manipula-lo com JavaScript. Agora criamos a modal de fato, como o título desse artigo sugere, utilizaremos a tag `dialog`. Dentro dessa tag, podemos criar a estrutura que fizer sentido para o projeto. Vou utilizar um título, parágrafo e um botão para ser adicionado o evento de fechamento da modal. ```html Minha modal Essa é uma simples maneira de criar uma modal fechar ``` Adicionei o atributo `open="true"` é simplesmente para que possamos ver o elemento e facilitar na estilização. Os outros dois ids adicionados foram o id da própria modal `id="minha-modal"` e o de fechamento da modal com o nome `id="fechar-modal"`. E isso é tudo que precisa para a nossa modal no HTML, obviamente, o conteúdo é fictício para fins didáticos, porém, caso queira você pode adicionar qualquer elemento HTML dentro da modal. ## Estilizando a nossa modal As estilizações de uma modal, pode ser feita normalmente, capturando os elementos com seletores que todos conhecemos, caso haja alguma dúvida quanto aos seletores CSS não tem problema. Aqui está um artigo sobre os [Seletores Básicos do CSS](https://www.treinaweb.com.br/blog/seletores-basicos-do-css "Seletores Básicos do CSS"), caso tenha acesso a plataforma, temos também um curso direcionado a esse tema essencial, o [HTML5 + CSS3 - Propriedades e seletores avançados](https://www.treinaweb.com.br/curso/html5-css3-propriedades-e-seletores-avancados "HTML5 + CSS3 - Propriedades e seletores avançados"). Bom, se você está acompanhando o passo a passo desse tutorial, você deve estar vendo, no seu navegador, algo similar a isso: ![Exemplo de uma modal antes da estilização](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/exemplo_modal_sem_estilizacao.png) Aqui nós temos o botão `Abrir modal`, entretanto, ainda sem a ação de abrir a modal. Também temos a própria modal, podemos observar algumas estilizações pré definidas pelo navegador. Como por exemplo, a modal centralizada e uma borda envolvendo o elemento. Tudo isso é normal, pois estamos utilizando a tag apropriada para criar esse componente. É importante ter em mente que podemos alterar e adicionar os estilos que forem necessários com CSS. Vou fazer algumas mudanças básicas na minha modal, porém, fique a vontade para fazer as mudanças que você preferir, aqui estão os estilos: ```css #minha-modal { border: solid 1px gray; border-radius: 5px; } #fechar-modal { background-color: rgb(53, 53, 167); color: #fff; padding: 5px 10px; border-radius: 5px; border: none; transition: .4s; } #fechar-modal:hover { transform: scale(1.05); } ``` E a modal ficou dessa forma: ![exemplo da modal com estilo aplicado](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/exemplo_modal_com_estilo_aplicado.png) Agora que a modal está estilizada, podemos remover o atributo `open="true"`, pois, vamos adicionar o evento de click no botão, para que esse componente tenha o comportamento correto. [ ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos) ## Adicionando o evento de click no botão para abrir a modal Até o momento, temos a nossa modal praticamente feita, faltando apenas o evento de click no botão de abertura para que possamos dar o comportamento correto ao componente. Então, vamos a ele. Ao final da `body` vou abrir uma tag de `script`, é dentro dessa tag onde ficarão contidos os códigos JavaScript que tornarão a modal visível sempre que o botão for clicado. Primeiramente, irei capturar todos os elementos necessário para executar tal ação. ```javascript let modal = document.getElementById('minha-modal'); let abrirModal = document.getElementById('abrir-modal'); let fecharModal = document.getElementById('fechar-modal'); ``` Como podemos observar eu peguei os elementos que criamos no HTML, o botão de abertura, a própria modal e o botão de fechamento da modal. Após isso, é necessário atribuir o evento de click para abrir a modal no botão de abertura. Todas vez que o botão for clicado ele irá executar o método `showModal()` da modal, esse código ficará dessa forma: ```javascript abrirModal.addEventListener('click', () => { modal.showModal(); }) ``` A modal já está com o comportamento correto, ou seja, abrindo sempre que clicamos no botão do evento, porém, para fecha-la, é necessário, atualizar a página ou apertar a tecla `Esc` do teclado. Isso é extremamente contra intuitivo para os usuários, é importante adicionar algo claro que o usuário possa fechar a modal, por isso, criamos o botão de fechar. Vamos, então, adicionar um evento de click nesse botão utilizando o método JavaScript `close()`. Dessa forma o usuário terá uma maneira simples e clara de como fechar a modal. ```javascript fecharModal.addEventListener('click', () => { modal.close() }) ``` Agora que o componente está completo e com comportamento adequado. Há outro aspecto que podemos alterar com CSS, achei melhor deixar para o final que assim o entendimento fica mais claro. Essa alteração é a cor de fundo da modal. Por padrão o fundo da modal, ou seja, tudo que não está dentro da modal, já recebe um escurecimento, atraindo atenção do usuário para o conteúdo da modal. Porém, podemos alterar sua cor, deixando ainda mais escuro o fundo. Fazemos essa alteração com a pseudo classe `backdrop`. ```css #minha-modal::backdrop { background: #5a5a5a7c; } ``` Utilizei uma cor suave, que dá um leve escurecimento para o fundo, mas lembrando, que você pode adicionar a cor que desejar. O resultado ficou assim: ![Modal Finalizada](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/ezgif-1-5f98804e95-1.gif) [ ![JavaScript - Manipulação de elementos HTML no DOM](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Curso JavaScript - Manipulação de elementos HTML no DOM Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-manipulacao-de-elementos-html-no-dom) ## Conclusão Em suma, ao utilizar a tag dialog, é possível criar facilmente modais responsivas e acessíveis. Ao seguir os passos mencionados, você pode incorporar essa funcionalidade de forma eficiente em seu projeto, oferecendo uma experiência interativa e amigável aos usuários. Caso queira, temos conteúdo aberto no YouTube dedicado a esse tema, o vídeo [Conheça a tag dialog do HTML](https://www.youtube.com/watch?v=A7wm60QXquc&t=1211s "Conheça a tag dialog do HTML"), nesse tutorial você pode acompanhar de forma mais visual tudo que aprendemos nesse artigo. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/BANNER-AULA-GRATUITA-1700x850-1.jpg) ](https://www.treinaweb.com.br/lp/aula-gratis/) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #Desenvolvimento Front-End ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-front-end) - [ #modal ](https://www.treinaweb.com.br/blog/tag/modal) - [ #dialog ](https://www.treinaweb.com.br/blog/tag/dialog) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/Como-alterar-o-font-family-do-site-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como alterar o font family do site ](https://www.treinaweb.com.br/blog/como-alterar-o-font-family-do-site) Nesse artigo veremos como você pode alterar o font family de seu site. Aprenderemos também as diferentes possibilidades de fazê-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ .NET Core 3.0 - Criando componentes no Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-componentes-no-razor-components) Veja neste artigo como é a estrutura de um componente do Razor Componente e aprenda a criar um. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/GUIA-HTML-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Guia da linguagem HTML ](https://www.treinaweb.com.br/blog/guia-da-linguagem-html) Esse guia é perfeito pra você que está começando ou quer entender melhor como podemos trabalhar com a linguagem HTML . Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/16094538/liquid-fluid-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Trabalhando com a template engine Liquid no ASP.NET Core ](https://www.treinaweb.com.br/blog/trabalhando-com-a-template-engine-liquid-no-asp-net-core) Em alguns projetos pode ser necessário substituir o Razor por outra engine template. Neste caso, aprenda como fazer esta substituição pelo Liquid. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/15145930/como-aliviar-seus-controllers-com-os-eventos-eloquent-no-laravel-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 9 anos atrás ## [ Como aliviar seus controllers com os eventos do Eloquent no Laravel ](https://www.treinaweb.com.br/blog/como-aliviar-seus-controllers-com-os-eventos-eloquent-no-laravel) Aprenda como os eventos do Eloquent podem te ajudar a diminuir a quantidade de lógica nos controllers de suas aplicações Laravel. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/26181326/CAPA-ELTON-MARÇO-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 8 anos atrás ## [ Como melhorar o retorno das suas APIs no Laravel com API Resource do Eloquent ](https://www.treinaweb.com.br/blog/como-melhorar-o-retorno-das-suas-apis-no-laravel-com-api-resource-do-eloquent) Um dos pontos mais importantes quando estamos trabalhando APIs é o retorno dos dados. Veja como melhorar suas APIs no Laravel usando o API Resouce do Eloquent. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/11153540/DJANGO-ADMIN-400x280.png) [ Django ](https://www.treinaweb.com.br/blog/categoria/django) 8 anos atrás ## [ Criando uma aplicação administrativa com Django Admin ](https://www.treinaweb.com.br/blog/criando-uma-aplicacao-administrativa-com-django-admin) Neste artigo veremos como criar uma aplicação administrativa com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/05103838/SIGNALR-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 7 anos atrás ## [ Aplicações em tempo real com ASP.NET Core SignalR ](https://www.treinaweb.com.br/blog/aplicacoes-em-tempo-real-com-asp-net-core-signalr) Aprenda como criar uma streaming api utilizando a biblioteca de aplicações em templo real, SignalR. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/06142705/django-flask-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 8 anos atrás ## [ Django ou Flask, eis a questão. ](https://www.treinaweb.com.br/blog/django-ou-flask-eis-a-questao) Então você vai criar sua aplicação web com o Python, certo? Mas, me diz aí, qual framework você vai utilizar? Django ou Flask? Bom, vamos ver neste artigo qual problema cada um deles resolve. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/opera--es-crud-400x280.jpg) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 10 anos atrás ## [ Operações CRUD no ASP.NET MVC 5 com o ADO.NET ](https://www.treinaweb.com.br/blog/operacoes-crud-no-asp-net-mvc-5-com-o-ado-net) Exemplo de como criar uma aplicação ASP.NET MVC utilizando ADO.NET como framework de acesso aos dados. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **17h 51min 14s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58