Popups nativos no navegador (Popover API) sem JavaScript!
Popups estão em toda parte. Eles são amplamente utilizados para diversos fins, como exibir anúncios, captar leads (através de formulários), fornecer…
Popups estão em toda parte. Eles são amplamente utilizados para diversos fins, como exibir anúncios, captar leads (através de formulários), fornecer notificações ou oferecer interações rápidas com o usuário.
Embora possam ser úteis para chamar a atenção ou aumentar a conversão, seu uso excessivo ou intrusivo pode prejudicar a experiência do usuário↳UX33 conteúdosUX e IA: Transformando Experiências Digitais com Inteligência ArtificialProduto & UX · jan 2025UX, IA e Front-End: quando experiência, inteligência e código se encontram para criar o futuro digitalProduto & UX · jul 2025Novidades em UX/UI para 2025: O futuro do design de experiências digitaisProduto & UX · abr 2025Ver tudo em Produto & UX →, tornando importante o equilíbrio entre relevância e frequência.
Implementar um popup não é nenhuma tarefa de outro mundo, mas também não é tão trivial quanto gostaríamos. É ncessário criar a interface com HTML↳HTML45 conteúdosA importância do HTML e CSS para quem trabalha com UI Design e Design SystemProduto & UX · dez 2024Como hostear seu site HTML gratuitamente com GitHub PagesDev (Back & Front) · jun 2025SQL Server – Como criar um versionamento de código das suas Stored Procedures em HTML e com comentários da alteraçãoData · nov 2020Ver tudo em Dev (Back & Front) →, customizar sua aparência com CSS e lidar com os diferentes casos de interação com o JS.
É por isso mesmo que geralmente usamos bibliotecas como o SweetAlert2 para fazer isso pra gente. Mas e se eu te disser que já existe uma API nativa para fazer isso? Estou falando da API popover! E sabe o melhor? Não precisamos nem de JavaScript! 😮
Para exemplificar o seu funcionamento, nós faremos uma pequena janelinha para que o usuário se cadastre na nossa newsletter.
A primeira coisa que precisaremos é de um botão que vai acionar a nossa caixinha:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover API</title>
</head>
<body>
<button>
Inscreva-se na nossa newsletter!
</button>
</body>
</html>Agora vamos atrelar este comportamento com a janela que desejamos que apareça. Para isso, usamos o atributo popovertarget. Veja:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popover API</title>
<style>
#newsletter-box::backdrop {
background: rgba(0, 0, 0, 0.6);
}
</style>
</head>
<body>
<button popovertarget="newsletter-box">
Inscreva-se na nossa newsletter!
</button>
<div id="newsletter-box" popover>
O conteúdo fica aqui
</div>
</body>
</html>Olha só que legal o resultado!
Mas e se não ficar claro para o usuário que ele deve clicar fora do modal ou usar a tecla esc para sair?
Neste caso, podemos alterar o atributo popover do nosso modal para ser manual!
<div id="newsletter-box" popover="manual">
O conteúdo fica aqui
</div>
Só que agora está impossível sair do modal! Vamos adicionar um botão para acionar o comportamento de fechar.
<div id="newsletter-box" popover="manual">
<button class="close-btn" popovertarget="newsletter-box" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
</button>
<p>O conteúdo fica aqui</p>
</div>Pronto! Inclusive agora podemos tirar o valor “manual” do atributo popover e ter os dois comportamentos!
—
Repositório
https://github.com/Professor-DiegoPinho/popover-api
—
Versão em vídeo
Confira a versão em vídeo desse artigo!
—
Bacharel em Ciência da Computação pela PUCSP e MBA em Gestão da Tecnologia da Informação na FIAP. Autor do livro ECMAScript 6 - Entre de cabeça no futuro do JavaScript. Cofundador da Code Prestige e Community Manager no iMasters.
