0 Compartilhamentos 51 Views

Como criar uma janela modal sem JavaScript

23 de janeiro de 2020

A maioria dos desenvolvedoras está tão condicionada a usar JavaScript para vários elementos de interface que esquece que o CSS evoluiu e possui muitos truques na manga. Um deles é a capacidade de gerar janelas modais, sem script, sem frameworks, sem bibliotecas. Basta usar de forma criativa a ID da DIV e âncora no link.

Para esse processo, nosso HTML básico precisaria de uma chamada de link para uma âncora e uma DIV, contendo o conteúdo do modal, com o mesmo ID chamado na âncora. Veja o exemplo:

Perceba que o botão fechar, na verdade, está recarregando o próprio endereço da página. Isso tem desvantagens, principalmente se estivermos falando de formulários ou conexões lentas. Entretanto, a alternativa aqui seria utilizar um script, o que foge de nosso objetivo.

Para o efeito funcionar, é fundamental que a âncora do link e o ID da DIV sejam idênticos. Por outro lado, como iremos trabalhar com classes no código CSS, a solução pode ser reaproveitada múltiplas vezes na página, como, por exemplo, em uma galeria de imagens.

No CSS que irá permitir o uso de um efeito modal, nós inserimos duas classes importantes, que devem aparecer no código da forma que estão. A classe modal será inicialmente invisível, mas tão logo ela se torne o “alvo” do nosso link, sua visibilidade será flexível. Acompanhe:

O código CSS a seguir também é obrigatório para tudo funcionar, mas você pode customizar o aspecto visual da forma que desejar.

Você pode se interessar

Como baixar o Windows 10 de graça a partir de versões anteriores
Dicas
4 visualizações
Dicas
4 visualizações

Como baixar o Windows 10 de graça a partir de versões anteriores

Carlos L. A. da Silva - 18 de fevereiro de 2020

O suporte para o Windows 7 terminou e você não vai querer ficar desprotegido e sem correção de falhas.

15 anos de Google Maps
Artigos
12 visualizações
Artigos
12 visualizações

15 anos de Google Maps

Carlos L. A. da Silva - 16 de fevereiro de 2020

Como o serviço nasceu e cresceu para se tornar um dos mais utilizados da plataforma? Para onde ele vai nos próximos 15 anos?

Promoções de Jogos do Final de Semana (14/02)
Notícias
16 visualizações
Notícias
16 visualizações

Promoções de Jogos do Final de Semana (14/02)

Carlos L. A. da Silva - 14 de fevereiro de 2020

Confira as melhores ofertas de jogos de PC para o final de semana.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Como consertar a busca do Windows 10
Dicas
20 visualizações
20 visualizações

Como consertar a busca do Windows 10

Carlos L. A. da Silva - 12 de fevereiro de 2020
Promoções de Jogos do Final de Semana (07/02)
Notícias
31 visualizações1
31 visualizações1

Promoções de Jogos do Final de Semana (07/02)

Carlos L. A. da Silva - 7 de fevereiro de 2020
Alphabet revela números impressionantes do YouTube
Notícias
33 visualizações
33 visualizações

Alphabet revela números impressionantes do YouTube

Carlos L. A. da Silva - 5 de fevereiro de 2020
Como impedir que o Windows 10 salve imagens como .jfif
Dicas
26 visualizações
26 visualizações

Como impedir que o Windows 10 salve imagens como .jfif

Carlos L. A. da Silva - 5 de fevereiro de 2020