Simples modal com CSS responsivo

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

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *