Gerador de modal (janela pop-up) com dialog

Gerador de modal (janela pop-up) com dialog: para que serve

Janelas modais servem para confirmar uma ação, mostrar um formulário curto ou destacar uma chamada sem tirar a pessoa da página. Feitas à mão com div, costumam falhar no teclado e no leitor de tela.

Este gerador usa o elemento dialog com showModal(), suportado por todos os navegadores atuais desde 2022: o navegador coloca a janela por cima, deixa o resto da página inerte, prende o foco, fecha com Esc e devolve o foco ao botão. O código acrescenta o estilo, o clique fora para fechar e uma entrada suave com @starting-style que respeita quem prefere menos movimento.

Como usar

1. Escreva o título, o texto e os botões.
2. Escolha a cor, a largura e os cantos.
3. Teste na prévia e copie o código.

Quando usar

• Chamada para agendar pelo WhatsApp.
• Confirmação antes de uma ação.
• Aviso de novidade ou formulário curto.

Perguntas frequentes

Por que usar o elemento dialog?

Com showModal() o navegador coloca a janela acima de tudo, deixa o resto da página inerte, prende o foco dentro dela, fecha com Esc e devolve o foco ao botão que abriu. Antes isso exigia bastante JavaScript e quase sempre ficava com falhas de acessibilidade.

Funciona em todos os navegadores?

Sim, o dialog é suportado pelo Chrome, Edge, Firefox e Safari desde 2022. A animação de entrada usa @starting-style, que nos navegadores mais antigos é simplesmente ignorada: a janela abre sem animação.

Posso abrir o modal sozinho ao entrar no site?

Pode, mas pop-up que abre sem a pessoa pedir costuma irritar e, no celular, o Google pode rebaixar páginas com anúncios intrusivos que cobrem o conteúdo. Prefira abrir a partir de um botão.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas