Dialog

O elemento <dialog> é uma forma nativa de criar modais e pop-ups no HTML.

Principais Características

•Gerencia foco automaticamente e suporta leitores de tela
•Estilize o fundo com o pseudo-elemento ::backdrop
•Usuários podem fechar o modal pressionando a tecla Escape
•O modal fica acima de todo o conteúdo, sem problemas de z-index

Métodos JavaScript

showModal()
Abre o dialog como modal, com backdrop e bloqueando interação externa

show()
Abre o dialog sem backdrop, permitindo interação com o resto da página

close()
Fecha o dialog. Pode receber um valor de retorno como parâmetro

Como Funciona

Para utilizar os métodos nativos do <dialog>, você precisa ter uma referência ao elemento. A forma de obter essa referência varia dependendo do ambiente:

HTML - Usando id
No HTML puro, basta adicionar um id ao elemento. O navegador cria automaticamente uma variável global com o mesmo nome, permitindo acessar diretamente: meuDialog.showModal()

React - Usando useRef
No React, usamos o hook useRef para criar uma referência e a passamos via prop ref. Acessamos o elemento através de dialogRef.current?.showModal()

Código

import { Fragment, useRef } from "react";

export default function DialogExample() {
  const dialogRef = useRef<HTMLDialogElement>(null);

  return (
    <Fragment>
      <button onClick={() => dialogRef.current?.showModal()}>
        Abrir Dialog
      </button>

      <dialog ref={dialogRef}>
        <h3>Título do Modal</h3>
        <p>Conteúdo do modal...</p>
        
        <div>
          <button onClick={() => dialogRef.current?.close()}>
            Cancelar
          </button>
          <button onClick={() => dialogRef.current?.close("confirmed")}>
            Confirmar
          </button>
        </div>
      </dialog>
    </Fragment>
  );
}

Demonstração

Clique no botão abaixo para ver o <dialog> em ação. Experimente fechá-lo com a tecla ESC ou clicando nos botões.