Continuando com os artigos, vamos utilizar novamente os seletores de css para exibir nosso modal.
Se você chegou aqui e não viu os posts anteriores, para conhecer a estrutura inicial acesse os links:
Header responsivo somente com css
Destaques responsivos
De uma maneira bem simples veja como preparar seu html e css.
O LABEL
Com os destaques responsivos, vamos adicionar abaixo da descrição um label que terá a função de marcar o checkbox e por css iremos exibir o modal.
O CSS DO BOTÃO
Vamos formatar o label para ser o nosso botão, lembrando que sempre precisamos usar a propriedade “for” para marcar o checkbox.
Adicionando o hover:
O HTML DO MODAL
Para um melhor resultado vamos adicionar html antes do “body”, mas se quiser aplicar dentro da section sem problemas. Ao aplicar “position: fixed” o elemento ignora o “position” do pai e respeita o tamanho da janela.
No resultado final poderá ver as modais aplicados dentro e fora da section.
O CSS DO MODAL
Agora formatando a cortina e o botão de fechar que é o label que colocamos depois do conteúdo do modal.
Agora vamos esconder o checkbox e fazer nosso modal aparecer com “:checked” do css3.
Um pequeno truque ao usar fixed e 50% para top, faz que o checkbox sempre fique no meio da janela evitando rolar a página ao ser selecionado. Se realizar um teste usando o inspect removendo o top: 50% e clicar no terceiro botão irá simular a rolagem.
Praticamente nosso css já está responsivo, mas vamos adaptar para resoluções menores que 768px.
PRONTO
Temos um modal responsivo e seu conteúdo pode ser adaptado para qualquer tamanho, desde que faça isso acontecer.
Veja como ficou o resultado final.
Veja o código completo no github.
CONCLUINDO
Podemos aplicar de várias formas e uma delas é usando o “:target”, porém quando temos uma tela muito grande e ao fechar precisamos adicionar o “#”, isso faz que a página role para o topo.
Agora com sua imaginação pode fazer diversas animações para exibir seu modal.
Espero ter ajudado com a criação de modais só com css.
Obrigado