Como ele é
Imagine um cartão deitado na mesa que alguém levanta até ficar de frente para você. Ao clicar no botão, a página por trás escurece e fica desfocada, e o painel surge pequeno, quase deitado e um pouco abaixo do centro; em seguida se ergue, cresce e se assenta no meio da tela com um leve balanço de mola. O painel tem cantos arredondados, até 720 pixels de largura e um X no canto superior direito que cresce ao passar o mouse. No modo claro, ele é branco; no escuro, quase preto com borda cinza. O rodapé opcional é cinza. Ao fechar, o painel encolhe e some.
Você pode estar procurando isto se pediu algo assim
- janela pop-up que abre com uma animação bonita
- caixa que aparece no meio da tela com o fundo desfocado
- modal que entra girando em 3D quando clico no botão
- abrir os detalhes do plano numa janela sem sair da página
- pop-up de agendamento com cara de app caro
- janela que fecha quando aperto Esc ou clico fora
- formulário que abre por cima do site com efeito
Também chamado de
- modal animado
- janela pop-up animada
- janela modal
- pop-up
- caixa de diálogo
- modal dialog
- modal 3D
Quando usar
- Detalhes de um plano ou produto sem tirar a pessoa da página
- Formulário curto de agendamento, contato ou cadastro
- Confirmação de uma ação importante, com Cancelar e Confirmar no rodapé
- Avisos de lançamento ou novidades que pedem um destaque passageiro
Quando evitar
- Conteúdo longo: o painel tem no máximo 85% da altura da tela e, sem ajuste, corta o que passar disso
- Pop-ups que abrem sozinhos ao entrar no site, que irritam e atrapalham a navegação
Como pedir para a sua IA
Crie um modal animado com entrada em 3D para os detalhes do plano: o painel se ergue com efeito de mola sobre um fundo desfocado, fecha com Esc e clique fora, devolve o foco ao botão, prende o Tab dentro da janela e tem versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Postal
Postal funciona com teclado e leitor de tela?
Em boa parte. Postal fecha com Esc, usa role dialog com aria-modal, leva o foco para o painel ao abrir e o devolve ao botão de origem ao fechar, e o X tem rótulo acessível. O código não prende o Tab dentro da janela, então vale pedir à IA um focus trap e um título ligado por aria-labelledby.
Dá para abrir Postal pelo código, sem um botão?
Sim. Postal aceita v-model:open para controlar a janela de fora, além de defaultOpen para o estado inicial, e entrega openModal, closeModal e toggle pelo slot ou pelo composable useAnimatedModal. Assim, a janela pode abrir depois do envio de um formulário ou ao fim de uma etapa.
Postal funciona no celular?
Funciona. No celular, Postal ocupa a largura da tela menos uma margem de 16 pixels de cada lado, fecha ao tocar fora do painel e trava a rolagem da página enquanto a janela está aberta. Como a altura máxima é 85% da tela e o excesso é cortado, conteúdos longos pedem uma área com rolagem interna.
