0 Compartilhamentos 54 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

Promoções de Jogos do Final de Semana (21/02) – Edição da Folia!
Notícias
7 visualizações
Notícias
7 visualizações

Promoções de Jogos do Final de Semana (21/02) – Edição da Folia!

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

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

A Microsoft salvou um filme inteiro em um pedaço de vidro e isso é o futuro chegando
Artigos
13 visualizações
Artigos
13 visualizações

A Microsoft salvou um filme inteiro em um pedaço de vidro e isso é o futuro chegando

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

Project Silica guardou o filme Superman, de 1978, em um pedaço de quartzo de vidro.

Como baixar o Windows 10 de graça a partir de versões anteriores
Dicas
14 visualizações
Dicas
14 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.

Deixe um Comentário

Your email address will not be published.

Mais publicações

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

15 anos de Google Maps

Carlos L. A. da Silva - 16 de fevereiro de 2020
Promoções de Jogos do Final de Semana (14/02)
Notícias
23 visualizações
23 visualizações

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

Carlos L. A. da Silva - 14 de fevereiro de 2020
Como consertar a busca do Windows 10
Dicas
25 visualizações
25 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
37 visualizações1
37 visualizações1

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

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