You are currently viewing Como criar um modal com o elemento dialog

Como criar um modal com o elemento dialog

Introdução

O dialog é um elemento CSS utilizado para criar caixas de diálogo, pop ups ou modais.

Pode ser muito útil para passar alguma informação relevante ao usuário.

Em outro post, mostrei como criar um modal com HTML e CSS, e neste caso irei mostrar como criar nativamente utilizando o elemento dialog.

Sobre o elemento

É um elemento simples do HTML e é representado pela tag <dialog>.

Ele aceita uma propriedade que é justamente utilizada para indicar se ele está aberto ou não, que é a propriedade open.

Exemplo do elemento:

<dialog open>Essa é uma caixa de diálogo</dialog>

É possível acessar essa propriedade com Javascript, e dessa forma alternar o estado do dialog entre aberto e fechado, fazendo o funcionamento do modal.

É preciso colocar um id no dialog, e depois acessar via javascript invocando o comando showModal:

<dialog id="meuDialog">Essa é uma caixa de diálogo</dialog>

<!-- Botão para chamar o showModal -->
<button onclick="window.meuDialog.showModal();">

Exemplo prático

A estrutura é simples, vamos para um exemplo prático e um pouco mais estilizado para exibir um modal na tela.

Primeiramente vamos criar uma estrutura HTML, crie um diretório e dentro dele crie o arquivo index.html:

<!-- index.html -->
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Modal dialog</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    ... o dialog ficará aqui
  </body>
</html>

Repare que já fiz a linkagem com um arquivo de estilos, então vamos criar esse arquivo para estilizar os elementos.

Crie o arquivo style.css e coloque o seguinte conteúdo:

/* style.css */
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Isso irá centralizar o conteúdo que estará no body do HTML.

Agora para o código do dialog, teremos dois elementos, como citado acima, um botão para chamar a abertura do modal, e o dialog em si:

<!-- index.html -->
<button class="button-open" onclick="window.modalDialog.showModal();">
  Abrir modal
</button>

<dialog id="modalDialog">
  <p>Conteúdo do modal</p>
  <form method="dialog">
    <button class="button-close">Fechar</button>
  </form>
</dialog>

É possível também colocar um id no botão, ter um javascript separado para invocar o método showModal, mas aqui quis simplificar.

O dialog pode ter diversos conteúdos nele, nesse caso coloquei só um parágrafo.

Também coloquei um formulário que tem o botão de fechar o modal.

Na sequência, vamos colocar o estilo para o modal, para os botões e para o fundo do HTML quando o modal estiver aberto:

button {
  width: 150px;
  padding: 10px;
  border-radius: 50px;
  outline: none;
  border: 0;
}

.button-open {
  background-color: green;
  color: white;
}

.button-close {
  background-color: red;
  color: white;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

O resultado desse código é esse:

dialog

Código fonte

O código fonte desse conteúdo está no meu CodeSandbox, e você pode acessar neste link.

Para ver outros canais onde o posto conteúdo sobre HTML e CSS veja os Links do Programando Soluções.

Referências

https://daily-dev-tips.com/posts/trying-out-native-dialog-modals/

https://www.w3schools.com/tags/tag_dialog.asp

Este conteúdo te ajudou de alguma forma?