Pop-up com CSS puro em 8 passos

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!