0 Compartilhamentos 156 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.

Carregando...

Você pode se interessar

Promoções de Jogos do Final de Semana (03/07)
Notícias
7 visualizações
Notícias
7 visualizações

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

Carlos L. A. da Silva - 3 de julho de 2020

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

Como plugar um dispositivo USB corretamente… de primeira!
Dicas
7 visualizações
Dicas
7 visualizações

Como plugar um dispositivo USB corretamente… de primeira!

Carlos L. A. da Silva - 3 de julho de 2020

Impossível? Feitiçaria? A resposta estava bem diante de nossos olhos todo esse tempo...

Microsoft está mapeando o planeta inteiro para simulador de voo
Artigos
15 visualizações
Artigos
15 visualizações

Microsoft está mapeando o planeta inteiro para simulador de voo

Carlos L. A. da Silva - 1 de julho de 2020

A franquia Flight Simulator está prestes a renascer com um nível de realismo jamais alcançado antes.

Deixe um Comentário

Your email address will not be published.

Mais publicações

Promoções de Jogos do Final de Semana (26/06)
Notícias
17 visualizações
17 visualizações

Promoções de Jogos do Final de Semana (26/06)

Carlos L. A. da Silva - 26 de junho de 2020
Os 10 melhores plugins de formulário para WordPress em 2020
Artigos
20 visualizações
20 visualizações

Os 10 melhores plugins de formulário para WordPress em 2020

Carlos L. A. da Silva - 26 de junho de 2020
Você precisa conhecer Deno
Artigos
23 visualizações
23 visualizações

Você precisa conhecer Deno

Carlos L. A. da Silva - 20 de junho de 2020
Promoções de Jogos do Final de Semana (19/06)
Notícias
23 visualizações
23 visualizações

Promoções de Jogos do Final de Semana (19/06)

Carlos L. A. da Silva - 19 de junho de 2020