Popover e dialog

No Laboratório Belavista, o menu “Tipos de papel” abre sem travar a página. O aviso de “encomenda enviada” (modal) trava o fundo. Popover e dialog resolvem papéis diferentes.

O exemplo está em pacote de exemplos/43-popover-e-dialog/. Abra index.html. Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Abrir popover com HTML (popovertarget) e com JavaScript leve.
• Diferença entre auto, manual e hint.
• Estilizar :popover-open e ::backdrop sem esconder o resto do site.
• Usar <dialog> modal com showModal() quando o fundo deve ficar inerte.

Popover sem JavaScript

O atributo popover esconde o bloco. Um botão com popovertarget abre e fecha.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Popover — Belavista</title>
    <link rel="stylesheet" href="estilos.css">
  </head>
  <body>
    <header>
      <button type="button" popovertarget="menu-papel">Tipos de papel</button>
      <div id="menu-papel" popover>
        <ul>
          <li>Vergê 120 g</li>
          <li>Couchê fosco</li>
          <li>Kraft reciclado</li>
        </ul>
      </div>
    </header>
    <main>
      <p>Escolha o papel do cartaz. O resto da página continua clicável.</p>
      <button type="button" id="abrir-modal">Confirmar encomenda</button>
      <dialog id="aviso">
        <form method="dialog">
          <p>Encomenda fictícia registrada neste navegador.</p>
          <button type="submit">Fechar</button>
        </form>
      </dialog>
    </main>
    <script src="app.js"></script>
  </body>
</html>

[popover] {
  padding: 1rem;
  border: 1px solid #1a3a4a;
  background: #fff;
}
[popover]:popover-open {
  display: block;
}
[popover]::backdrop {
  background: transparent; /* popover não é modal */
}
dialog::backdrop {
  background: rgb(0 0 0 / 0.4);
}

const aviso = document.getElementById("aviso");
document.getElementById("abrir-modal").addEventListener("click", function () {
  aviso.showModal();
});

Mude uma coisa. Troque popover por popover="manual". Preveja: clique fora não fecha. Confira. Depois volte para o padrão.

Tipos: auto, manual, hint

• auto (padrão): um de cada vez, light dismiss (clique fora e Esc).
• manual: só fecha se você mandar; vários podem ficar abertos.
• hint: bom para dicas; não derruba um popover auto aberto.

Erro comum: aplicar display: grid em [popover] sem :popover-open. O popover deixa de ficar oculto (display: none).

Dialog modal

showModal() coloca o diálogo na camada superior e torna o fundo inerte. method="dialog" no formulário fecha ao enviar. Popover não faz isso sozinho.

Posicione o popover perto do botão com anchor positioning (capítulo 42). Lembre margin: unset no popover.

Arquivo no disco. Teste em 127.0.0.1. Sem dados reais de cliente.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Popover é modal por padrão?
2. Por que estilizar [popover] com display fora de :popover-open é perigoso?
3. Qual método do <dialog> trava a interação com o resto da página?

Respostas comentadas

1. Não. Você continua interagindo com o conteúdo de fora; o backdrop não deve tapar a página.
2. Porque o ocultamento do popover depende de display: none; forçar display no seletor geral mostra todos abertos.
3. showModal() (não show()).

O arquivo completo

Referência do exemplo 43-popover-e-dialog, reproduzida aqui para que você possa conferir sem sair da página.

demo.js

document.getElementById('dlg-btn').onclick=()=>document.getElementById('dlg').showModal();