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

Por que eu decidi não migrar para o Windows 11 agora
Artigos
100 visualizações
Artigos
100 visualizações

Por que eu decidi não migrar para o Windows 11 agora

Carlos L. A. da Silva - 19 de outubro de 2021

O novo sistema operacional da Microsoft está entre nós, mas talvez não seja uma boa ideia pular de cabeça.

Enumerando e analisando mais de 40 implementações de JavaScript (que não são V8)
Artigos
231 visualizações
Artigos
231 visualizações

Enumerando e analisando mais de 40 implementações de JavaScript (que não são V8)

Carlos L. A. da Silva - 6 de outubro de 2021

V8 é o interpretador JavaScript, também chamado de máquina virtual Javascript, desenvolvido pela Google e utilizado em seu navegador Google Chrome. Com o peso de seus criadores e a quase onipresença do navegador, foi apenas uma questão de tempo para essa implementação do JavaScritp se tornar dominante no mercado. Entretanto, um bom desenvolvedor sabe que […]

Sir Clive Sinclair, o homem adiantado no tempo
Artigos
413 visualizações
Artigos
413 visualizações

Sir Clive Sinclair, o homem adiantado no tempo

Carlos L. A. da Silva - 18 de setembro de 2021

O inglês Clive Marles Sinclair nasceu de uma família de engenheiros. Seu avô foi engenheiro, assim como o seu pai. Com um talento natural pela Matemática e um forte interesse em eletrônica, ele se tornaria uma página importante da popularização da computação em diversas partes do mundo, construindo um legado que se perpetuará por anos […]

Deixe um Comentário

Your email address will not be published.

Mais publicações

A cibersegurança por trás das vacinas
Artigos
510 visualizações
510 visualizações

A cibersegurança por trás das vacinas

Carlos L. A. da Silva - 7 de setembro de 2021
Top 25 comandos do Git
Artigos
651 visualizações
651 visualizações

Top 25 comandos do Git

Carlos L. A. da Silva - 28 de agosto de 2021
Dez anos de Kotlin: origens e futuro
Artigos
703 visualizações
703 visualizações

Dez anos de Kotlin: origens e futuro

Carlos L. A. da Silva - 20 de agosto de 2021