0 Compartilhamentos 90 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 remover sugestões de URL da barra de endereços do Chrome
Dicas
5 visualizações
Dicas
5 visualizações

Como remover sugestões de URL da barra de endereços do Chrome

Carlos L. A. da Silva - 9 de abril de 2020

Navegador guarda qualquer endereço visitado e sugere pra você, mas você não precisa apagar o Histórico inteiro para se livrar de um deles.

IBM amplia Call for Code Challenge 2020 para enfrentar o COVID-19
Notícias
8 visualizações
Notícias
8 visualizações

IBM amplia Call for Code Challenge 2020 para enfrentar o COVID-19

Redação - 7 de abril de 2020

A IBM está expandindo o desafio global Call For Code 2020 para abordar a reação do mundo com o COVID–19, além das mudanças climáticas: duas questões urgentes que podem comprometer nossa saúde, nosso planeta e nossa sobrevivência.

Que fim levou o Windows Phone?
Artigos
10 visualizações
Artigos
10 visualizações

Que fim levou o Windows Phone?

Carlos L. A. da Silva - 6 de abril de 2020

A longa história de estratégias equivocadas da Microsoft em dispositivos móveis e o fim de um sonho.

Deixe um Comentário

Your email address will not be published.

Mais publicações

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

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

Carlos L. A. da Silva - 3 de abril de 2020
Como descobrir se tem um “fantasma” no seu teclado
Dicas
22 visualizações
22 visualizações

Como descobrir se tem um “fantasma” no seu teclado

Carlos L. A. da Silva - 2 de abril de 2020
Trabalhando de casa
Artigos
30 visualizações
30 visualizações

Trabalhando de casa

Carlos L. A. da Silva - 30 de março de 2020
Promoções de Jogos do Final de Semana (27/03)
Notícias
29 visualizações
29 visualizações

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

Carlos L. A. da Silva - 27 de março de 2020