Sistema de pop-up com HTML e CSS
Oii, tudo bem? Irei mostrar aqui hoje um sistema de pop-up que desenvolvi usando apenas HTML e CSS. Eu espero que você goste do artigo e que este sistema te ajude em algo!
Antes de tudo: sei que essa não é a maneira mais eficiente de se criar um pop-up e eu concordo com você que seria melhor usar Javascript para isso. Mas o meu objetivo aqui não é criar o melhor sistema para implementar em um site e sim estudar e usar na prática o CSS de maneira não convencional.
Saber estilizar uns elementos é muito legal mas, melhor do que conhecer CSS e conseguir criar estilos simples, é dominar o CSS. Todos se satisfazem com o básico e raramente vemos alguém com interesse em se aprofundar e dominar essa linguagem que, por mais simples que pareça, é extremamente poderosa!
O sistema
Para entender como este sistema funciona é necessário conhecer apenas 2 coisas:
- O elemento <input> do HTML - Que usaremos como botões para indentificar o click
- A pseudo-classe :checked do CSS - Que usaremos no input para criar estilos a partir do click
1º Passo:
Precisamos de dois <input>'s, um para abrir e outro para fechar o pop-up (eles servirão de botões). Também precisamos que eles tenham um indentificador então adicionemos um id para cada.
Outra coisa que precisamos é que façam parte do mesmo "grupo de inputs", então adicionaremos o atributo name com o mesmo valor para ambos.
<input id="abrir-popup" name="popup"> <input id="fechar-popup" name="popup">
2º Passo:
Como os inputs são do mesmo "grupo de inputs", ao adicionar o tipo radio conseguimos com que apenas um dos dois inputs possa ser selecionado ao mesmo tempo. Assim o pop-up só poderá ser aberto quando estiver fechado e só poderá ser fechado quando estiver aberto, funcionando corretamente.
*Quando a página é carregada precisamos que o pop-up esteja fechado por padrão e que só abra quando o usuário clicar para abrir, para isso adicionaremos também o atributo checked no segundo input.
<input id="abrir-popup" name="popup" type="radio"> <input id="fechar-popup" name="popup" type="radio" checked>
3º Passo:
Para saber se o pop-up está aberto ou fechado no CSS, usaremos a pseudo-classe :checked em cada input (faremos isso através do id).
Aqui irei também adicionar uma div com o conteúdo do pop-up! (Em breve esta div será estilizada e terá uma cara de pop-up de verdade, não se preocupe).
<style>
#abrir-popup:checked {
}
#fechar-popup:checked {
}
</style>
<input id="abrir-popup" name="popup" type="radio">
<input id="fechar-popup" name="popup" type="radio" checked>
<div id="conteudo">
<p>Conteúdo</p>
</div>
__
Ok, temos os inputs na tela e já conseguimos indentificar com o CSS quando cada um está selecionado, os botões estão prontos! Agora precisamos fazer que algo aconteça quando clicamos neles.
__
4º Passo:
Para estilizar o conteúdo a partir da ativação do input, usaremos o operador ~ entre o input e o conteúdo, assim: #abrir-popup:checked ~ #conteudo.
Este operador irá selecionar o elemento especificado do lado direito da operação sempre que ele for precedido (não necessariamente imediatamente) do elemento especificado ao lado esquerdo da operação.
*Ou seja: os estilos serão aplicados ao conteúdo quando o input estiver ativo.
<style>
#abrir-popup:checked ~ #conteudo {
}
#fechar-popup:checked ~ #conteudo {
}
</style>
<input id="abrir-popup" name="popup" type="radio">
<input id="fechar-popup" name="popup" type="radio" checked>
<div id="conteudo">
<p>Conteúdo</p>
</div>
5º Passo:
O que precisamos fazer agora é esconder o conteúdo quando o input #fechar-popup estiver ativo e mostrar quando o input #abrir-popup estiver ativo!
<style>
#abrir-popup:checked ~ #conteudo {
display: block;
}
#fechar-popup:checked ~ #conteudo {
display: none;
}
</style>
<input id="abrir-popup" name="popup" type="radio">
<input id="fechar-popup" name="popup" type="radio" checked>
<div id="conteudo">
<p>Conteúdo</p>
</div>
6º Passo:
Ok, já construimos o mecanismo e a partir daqui é só estilizar!
Para que tenhamos liberdade para posicionar os botões onde quisermos e estilizá-los do jeito que quisermos, iremos criar tags <label>'s e associá-las aos inputs: <label for="abrir-popup"> e <label for="fechar-popup">
Assim, passaremos a usar estes dois elementos como "alvos" e não será mais necessário clicar exatamente no input. E já que não serão mais necessários, adicionarei a propriedade hidden neles, para que sejam escondidos.
<style>
#abrir-popup:checked ~ #conteudo {
display: block;
}
#fechar-popup:checked ~ #conteudo {
display: none;
}
</style>
<input id="abrir-popup" name="popup" type="radio" hidden>
<input id="fechar-popup" name="popup" type="radio" hidden checked>
<label for="abrir-popup">Abrir</label>
<label for="fechar-popup">Fechar</label>
<div id="conteudo">
<p>Conteúdo</p>
</div>
7º Passo:
Para manipular melhor os elementos labels, criarei um id para cada e... que tal agora também darmos uma cara de botão para a label "Abrir" e fazer com que o pop-up se pareça realmente um pop-up kkk? Adicionarei estilos no botão e no conteúdo.
<style>
#abrir-popup:checked ~ #conteudo {
display: block;
}
#fechar-popup:checked ~ #conteudo {
display: none;
}
#abrir-popup-btn {
display: block;
color: white;
background-color: #a45fd2;
width: fit-content;
padding: 12px 34px;
border-radius: 4px;
box-shadow: 0px 5px 15px -5px #0000003c;
cursor: pointer;
}
#conteudo {
box-sizing: border-box;
position: fixed;
width: min(380px, 90vw);
height: 160px;
left: max(calc(50vw - 380px / 2), 4vw);
top: calc(50vh - 80px);
padding: 22px;
background-color: #efd7ff;
border: 2px solid #c59fde;
border-radius: 8px;
box-shadow: 0px 5px 15px -5px #0000003c;
}
</style>
<input id="abrir-popup" name="popup" type="radio" hidden>
<input id="fechar-popup" name="popup" type="radio" hidden checked>
<label id="abrir-popup-btn" for="abrir-popup">Abrir</label>
<label id="fechar-popup-btn" for="fechar-popup">Fechar</label>
<div id="conteudo">
<p>Conteúdo</p>
</div>
8º Passo:
Finalmente! Precisamos agora apenas estilizar o botão para fechar o pop-up! Neste caso farei com que botão seja o fundo de todo o documento, assim ele irá também cobrir todo o conteúdo da página, mas sinta-se à vontade para usá-lo como quiser (no fim deixarei exemplos de outros modos).
*Também, para que o botão de fechar só apareça quando o pop-up estiver ativo, irei adicioná-lo junto ao estilo já criado para esconder o pop-up (#fechar-popup:checked ~ #conteudo { display: none; })
<style>
#abrir-popup:checked ~ #conteudo {
display: block;
}
#fechar-popup:checked ~ #conteudo, #fechar-popup:checked ~ #fechar-popup-btn{
display: none;
}
#abrir-popup-btn {
display: block;
color: white;
background-color: #a45fd2;
width: fit-content;
padding: 12px 34px;
border-radius: 4px;
box-shadow: 0px 5px 15px -5px #20003044;
cursor: pointer;
}
#fechar-popup-btn {
background-color: #00000020;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
#conteudo {
box-sizing: border-box;
position: fixed;
width: min(380px, 90vw);
height: 160px;
left: max(calc(50vw - 380px / 2), 4vw);
top: calc(50vh - 80px);
padding: 22px;
background-color: #efd7ff;
border: 2px solid #c59fde;
border-radius: 8px;
box-shadow: 0px 5px 15px -5px #0000003c;
}
</style>
<input id="abrir-popup" name="popup" type="radio" hidden>
<input id="fechar-popup" name="popup" type="radio" hidden checked>
<label id="abrir-popup-btn" for="abrir-popup">Abrir</label>
<label id="fechar-popup-btn" for="fechar-popup">Fechar</label>
<div id="conteudo">
<p>Conteúdo</p>
</div>
Links:
Código do artigo no GitHub: https://github.com/Refusado/Pop-up-CSS/blob/main/artigo/index.html
Demonstração do código do artigo: https://refusado.github.io/Pop-up-CSS/artigo/
Outros exemplos de uso do sistema: https://refusado.github.io/Pop-up-CSS/
__
Lembrem-se que o mais importante aqui é entender o sistema de botões para ter o poder de utilizá-lo sempre que quiser. Com este sistema é possível fazer muito mais do que pop-ups e espero realmente que você consiga fazer muito mais que isso. Veja os outros exemplos, coloque em prática, tente criar outros usos para o sistema, adicione animações... se aprofunde no CSS!
__
É isto! Eu pretendo escrever mais artigos então, por favor, deixe um comentário com o seu feedback para que eu saiba como melhorar. Muito obrigado!
Faça parte da nossa comunidade!
Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.
