Lightbox vs. Modal
Um lightbox é um modal feito para imagens ou vídeos. Um modal normal guarda uma escolha, um formulário ou uma tarefa curta.
Use uma lightbox para ampliar imagens ou vídeos. Use um modal quando a função principal for agir ou decidir.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Lightbox
Um lightbox abre a mídia num visualizador maior e escurece a página ao redor.
<dialog>Selecione uma foto para abrir uma visualização em tamanho real com legenda. Possui botões Anterior, Próximo e Fechar.
- Use-o quando
- Use-o para olhar de perto a mídia sem perder o lugar atual na galeria.
- Não o use quando
- Nunca o use para uma tarefa que necessite de edição complexa ou comparação lado a lado.
- Nome usado no código
<dialog>
Diálogo Modal
Uma janela modal é uma tela focada. Ela bloqueia a tela atual até alguém fechar ou terminar o que estava fazendo.
Para exclusão de conta, o foco do teclado permanece dentro do diálogo. Se a pessoa cancelar, o foco retorna ao botão que o abriu.
- Use-o quando
- Use-o para uma escolha curta ou pequena tarefa que precise de atenção total.
- Não o use quando
- Nunca abra um diálogo sobre outro ou use um para informações normais e de baixo risco.
- Nome usado no código
<dialog> / role="dialog" aria-modal="true"
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| LightboxLightbox | Use-o para olhar de perto a mídia sem perder o lugar atual na galeria. | Nunca o use para uma tarefa que necessite de edição complexa ou comparação lado a lado. | <dialog> |
| Diálogo ModalModal Dialog | Use-o para uma escolha curta ou pequena tarefa que precise de atenção total. | Nunca abra um diálogo sobre outro ou use um para informações normais e de baixo risco. | <dialog> / role="dialog" aria-modal="true" |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Lightbox (Lightbox), Diálogo Modal (Modal Dialog) para o nosso fluxo real de usuário. Use esta regra: Um lightbox é um modal feito para imagens ou vídeos. Um modal normal guarda uma escolha, um formulário ou uma tarefa curta. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.