Como criar uma janela modal sem JavaScript

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:

Abrir janela modal




x
Conteúdo qualquer.

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:

/* --- ESSENCIAL --- */

.modal {
display: none;
}

.modal:target {
display: flex;
}

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

/* --- CUSTOMIZÁVEL, MAS OBRIGATÓRIO --- */

.modal {
text-align: left;
backdrop-filter: blur(2px);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
padding: 2rem;
}

.modal:target {
justify-content: space-around;
align-items: center;
}

.modal__overlay {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
cursor: default;
}

.modal__content {
min-width: 480px;
position: relative;
background-color: #f5f5f5;
padding: 2rem;
}

.modal__close {
color: initial;
text-decoration: none;
position: absolute;
top: 0;
right: 0;
padding: 0 0.5rem;
display: inline-block;
}