Você precisa de um pop-up modal em seu site quando um usuário clica em um link ou botão? Normalmente, vemos isso em uso para logins, inscrições em boletins informativos, publicidade e muito mais. Na maioria das vezes, eles são criados usando um pouco de truques de JavaScript, mas hoje em dia eles podem ser codificados com relativa facilidade apenas com CSS. Neste post, mostraremos 15 exemplos de várias maneiras de fazer isso. Vamos dar uma olhada!
Modal Responsivo a CSS
Este exemplo responsivo se ajusta ao tamanho do navegador e fica em tela cheia em dispositivos menores.
CSS Modal
Este exemplo inclui algumas animações suaves em ações de abertura e fechamento.
:targetSeletor Modal CSS
Um uso inteligente do :targetseletor para abrir um pop-up simplesmente alternando sua opacidade.
Caixa Modal CSS Puro
Interessante uso de rótulos e entradas para criar um popup modal.
Modal CSS puro
Uma animação muito legal para abrir um popup modal em tela cheia.
Popup Modal CSS Puro
Outro uso de um rótulo e entrada para utilizar o estado verificado para mostrar o modal.
Modais CSS puros
Quatro animações de entrada e saída diferentes são mostradas neste exemplo.
Modal CSS puro
Animações suaves destacam este exemplo.
Três modais CSS
Três variações de opacidade de fundo estão neste exemplo.
Exemplo Modal CSS3
Este pop-up modal desliza para cima quando é aberto.
Janela Modal CSS puro / Login e inscrição / Guias / Todos responsivos
Há MUITO acontecendo com este, incluindo guias no pop-up modal e design responsivo por toda parte.
CSS Modal
Outro exemplo usando o :targetseletor, com uma entrada modal deslizante.
Diálogo modal CSS puro com conteúdo deslizante
Uma configuração um tanto simples, mas com um controle deslizante de conteúdo.
Caixas modais CSS para todos os navegadores
Uma versão que se aprofunda no suporte a navegadores mais antigos.
Modal (somente CSS)
Para nossa seleção final, temos um pop-up modal bastante padrão com uma entrada e saída animadas suaves.